Salesforce Richtext Fail – Rerender is not currently supported with rich text editing enabled

When I was new to Salesforce I made a deliberate effort to leverage as much of the framework as possible. With mixed results. As a result I placed a drop-down list inside of an action region in an attempt to leverage the framework’s ajax call. So I was floored to discover that richtext functionality for textareas is not supported when the action region performs a Rerender. Like so many things with salesforce this required a non-salesforce workaround. Enter the ckeditor. For those of you unfamiliar with ckeditor it is an open source html wysiwyg editor.

1. Download CkEditor here. Go to Your Name –>Develop –> Static Resources and click ‘New.’ Upload the zip file and call it ‘CkEditor.’
2. Add a reference to the zip file in your page like this:

<apex:includescript value="{!URLFOR($Resource.CkEditor,
 'ckeditor/ckeditor.js')}" />

3. Add the styleClass ckeditor to you textarea:

<apex:inputtextarea  styleClass="ckeditor"
 richtext="false" /> 

4. Add the following function to your page:

function ReloadCKEditor() {
   for(name in CKEDITOR.instances)
   {
       delete CKEDITOR.instances[name];
   }
   CKEDITOR.replaceAll();
}

5. Inside your action support tag add the function to oncomplete event:

<apex:actionSupport rerender="thePageBlock"
 oncomplete="ReloadCkEditor();"/> 

And thats it! You can now have rich text functionality for the rerender.

This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to Salesforce Richtext Fail – Rerender is not currently supported with rich text editing enabled

  1. Kelly says:

    This was super helpful – thank you so much! One small note, the javascript name was case sensitive for me so i had to change it from “function ReloadCKEditor…” to “function ReloadCkEditor” (lower case ‘k’) in order for the javascript function to be called. Thanks!

  2. Kelly says:

    I also found out that adding rerender functionality to a command button breaks sending the CKEditor data to the controller. To get around this you need to add some javascript to capture the CK values:

    create hidden text field:

    add js function to Button:

    add Javaascript:

    function setCKEditorValues()
    {
    for(name in CKEDITOR.instances)
    {
    if (name == ‘mapNotePage:form:MapProductData:resultsBlock:ckMapAdditionalNotesId’)
    {
    document.getElementById(‘{!$component.form.ckMapAdditionalNotesHidden}’).value = CKEDITOR.instances[name].getData();
    }
    }
    }

    Have your controller grab the hidden fields value. I have noticed that the CKEditor values do not all get stored in SFDC richtextarea fields though. For instance ‘strike’ is stored as for CKEditor and in sfdc rich text editor… Hope this helps some people!

  3. Thats a good a good question, I have not tried to implement all of the features for CKEditor, I chose an implementation with fewer options, and this one wasn’t chosen.

Leave a comment