Integrating a Rich Text Editor to Formspider

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

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.

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:

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

.. 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...)

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

Hello Michiel and Raymond ,

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

Thanks, I find way and all make :D