Hi Guys,

Is there an option to define a field with basic simple html editing like ckeditor?

Cheers Raymond

asked 19 Feb '14, 08:09

Raymond's gravatar image

Raymond
24320
accept rate: 0%

edited 07 May '15, 10:22

Yalim%20Gerger's gravatar image

Yalim Gerger ♦♦
1.8k5


Hi Raymond,

Unfortunately no. You can use an htmlRenderer component and show any HTML you want on the screen. The component simply points to a URL the developer supplies. But you need to manage any data manipulation that might happen inside htmlRenderer.

Hope this helps.

Kind Regards, Yalim

link

answered 19 Feb '14, 08:15

Yalim%20Gerger's gravatar image

Yalim Gerger ♦♦
1.8k5
accept rate: 15%

Hi Raymond,

Depending on your usecase, it is possible to use CKEditor in Formspider to edit a TextArea. You will have to work with the external methods to initiate the CKeditor instance on the textarea and get the edited data when you want to save it. I use it in a popup form to edit html text for email messages. I am not a javascript guru, but i got it working for my usecase. In short you would have to:

  • include the CK Editor sources directory to your tomcat/glassfish domain root directory
  • make a custom javascript file with some javascript functions to initialize, load the data and destroy the editor
  • create Formspider external methods for these js functions
  • in the dialog window post-show event initialize the CKeditor on the TextArea (in the Formspider application a component in the DOM has an ID with format (Formspider component name)-(Formspider panel name) You can use that format to initialize the CKeditor)
  • in the dialog window pre-hide event destroy the editor
  • on the dialog save action, call an external method to get the edited data from the editor, and store that in the datasource (i use a clob to store the html code).

I got this to work for my usecase wich is editing a single TextArea at a time in a popup, but i guess it can be done in different ways also.

Good luck,
Michiel A.

alt text

link

answered 20 Feb '14, 03:25

Michiel%20A's gravatar image

Michiel A
5161546
accept rate: 13%

edited 20 Feb '14, 03:57

Waow!!! :-)

(20 Feb '14, 03:55) Yalim ♦♦

Hi Michiel,

Thank you so much for that information. Now I know probably even less javascript then you. Would you be able to share some of the javascript you have used. I am actually after the same functionality as you have shown in the screenshot. Send HTML email to people, for password, campaign letter etc.

So yes I would store the html text in a clob as well of course. I am still on a learning curve with formspider. Have come from Oracle Forms and lots of APEX. But in the end choose to go with formspider as I was tired waiting for APEX to get the functionality there. Yes I could have gotten FOEX but at 20,000 euro that was never going to happen. There are still a number of things I would like to see added to Formspider (ckeditor would be one).

I would be interested to hear why you decided on Formspider in the end and put Apex to the side. I can send you my email address if you are willing to share some javascript/formspider code.

Ik zou elke hulp je kan aanbieden erg op prijs stellen. Het is interessant te zien dat Nederlanders aangetrokken zijn tot Formspider. Nog steeds nederlander, maar aan de andere kant van de wereld, in Australie.

Thanks!

link

answered 20 Feb '14, 04:50

Raymond's gravatar image

Raymond
24320
accept rate: 0%

Hi Raymond,

No problem, i will share my js functions and i will provide the PL/SQL procedures that call them as examples as well.

As for my raasons to choose Formspider, i wrote a blog about that which Yalim published here: http://theformspider.com/blog/2013/01/17/rhenus-uses-formspider/

Single line summary: Formspider allowes you to create business applications instead of web pages. Using FOEX will not change that.. it still is based on Apex pages. The flexibility you have in Formspider you can only dream of when using Apex :-)

I will post my code below, it might be usefull for others as well.

Groeten uit Amsterdam, Michiel

(20 Feb '14, 05:16) Michiel A

Here are the javascript functions i use. Put these is a custom.js file and put it in the same directory as the fs-all.js file is in your midtear installation. Add the ckeditor sourcecode directory at the domain root as well (next to the /js dir). Add references to the custom javascript file and the CKeditor js file in your main.jsp, like this:

<script type="text/javascript" src="js/fs-all.js?v=1.6.0"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

This is the content of the custom.js file:

function editorReplace (editor_name, editor_width, editor_height) {
   CKEDITOR.replace(editor_name,
    {
     // Modify the toolbar if needed 
/*        toolbar :
        [
            ['Source'],
            ['Bold','Italic','Underline','Strike'],
        ], */
        height: editor_height,
        width: editor_width
    });
}

function editorDestroy (editor_name) {
   CKEDITOR.instances[editor_name].destroy()
}

function editorGetData (editor_name) {
   CKEDITOR.instances[editor_name].document.getBody().getHtml()
}

You must create Formpider external method definitions that call these js functions:

alt text

alt text

alt text

In this last CKEditor_getdata external method is a Post method completed action that is called after it stores the Editor content (check if it needs to close the dialog), but it is not needed.

Now we need some procedure to call the external methods:

------------------------------------------------------------------------------------------------
procedure set_editor
is
   l_params_t api_externalMethod.tt_params;
begin
   -- initialize the CKEditor textarea
   l_params_t('0').value_tx := 'html_code-autete010_dg_form';
   l_params_t('1').value_tx := '100%';
   l_params_t('2').value_tx := '312';

   api_externalmethod.invoke (in_externalmethodname_tx => 'CKEditor_replace'
                             ,in_params_t              => l_params_t
                             );
end set_editor;
------------------------------------------------------------------------------------------------
procedure destroy_editor
is
   l_params_t api_externalMethod.tt_params;
begin
   l_params_t('0').value_tx := 'html_code-autete010_dg_form'; -- <formpider textarea name>-<formspider panel name>

   api_externalmethod.invoke (in_externalmethodname_tx => 'CKEditor_destroy'
                             ,in_params_t              => l_params_t
                             );
end destroy_editor;
------------------------------------------------------------------------------------------------
procedure save_editor_data (p_close_yn_i in varchar2)
is
   l_params_t api_externalMethod.tt_params;
begin
   // store wether to clese the dialog after the CKeditor_getData external method is done.
   api_session.add (in_name_tx  => '_dg_save_close_yn'
                   ,in_value_tx => p_close_yn_i
                   );

   l_params_t('0').value_tx := 'html_code-autete010_dg_form'; -- <formpider textarea name>-<formspider panel name>

   api_externalMethod.invoke (in_externalmethodname_tx => 'CKeditor_getData'
                             ,in_params_t              => l_params_t
                             );

end save_editor_data;
------------------------------------------------------------------------------------------------

Final step is to create the panels and put it all together. I will put those instructions in the next post...

Best, Michiel

link

answered 20 Feb '14, 05:58

Michiel%20A's gravatar image

Michiel A
5161546
accept rate: 13%

edited 20 Feb '14, 06:01

.. so to put it all together:

  • create a dialog window with preHide and postShow events. Here is a little screenshot of my panel code (can't seem to get XML code in a code block here...)

alt text

In the "autete010_dg_cancel" action i call this sp (it destroys the editor and refreshes the current ds row):

procedure dialog_cancel
is
begin
   destroy_editor; -- this procedure is in earlier post above..
   api_datasource.refreshcurrentrow( in_datasourcename_tx => g_master_datasource);
end dialog_cancel;

In the postShow action you call the set_editor procedure (see earlier post). You probably have to play a little with the height to have the editor fit your window size.

In the dialog panel the save button calls the save_editor_data procedure.

This should be it, but i might have forgotton a detail.. Give it a try and see if you can get it working.

If not, let me know ;-)
Good luck.

Best regards,
Michiel

link

answered 20 Feb '14, 06:37

Michiel%20A's gravatar image

Michiel A
5161546
accept rate: 13%

Can't thank you enough. Thanks again!

(20 Feb '14, 06:44) Raymond

i will send you the zipped ckeditor source directory i use. I got your email, so you better obfuscate it a bit in your above answer ;)

(20 Feb '14, 06:48) Michiel A

Hello Michiel and Raymond ,

Maybe can send and for me ckeditor source?
I try implement ckeditor :)

link

answered 25 Feb '15, 01:33

AlfAbetas's gravatar image

AlfAbetas
611316
accept rate: 9%

Hi Alfa,

I could, just give me your email address here and i can send it

Best, Michiel A

(25 Feb '15, 07:49) Michiel A

Thanks, I find way and all make :D

link

answered 25 Feb '15, 10:40

AlfAbetas's gravatar image

AlfAbetas
611316
accept rate: 9%

ok, cool. Glad this could help you out.

(25 Feb '15, 10:45) Michiel A
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×5
×4
×2
×1
×1

Asked: 19 Feb '14, 08:09

Seen: 3,561 times

Last updated: 07 May '15, 10:22


© Copyright Gerger 2017