CKEditor when used to rerender text area to rich text area breaks the binding with the controller

Question

I tried using CKEditor to render the text area as rich text. But when I edit the text present in the editor, it does not sync back to the controller. Here is the code i used to make text area rich text editor :

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

j$('[id$=oNextSteps]').ckeditor();

As the data is not syncing back the use of CKEditor is becoming redundant.Any ideas ?

I am using ckeditor because rich text area's in Salesforce do not allow rerendering. I cannot use standard rich text area.

Answer 1

I suggest one of these approaches:

• Replace your "Text Area (Long)" type field with a "Text Area (Rich)" field that uses the CKEditor JavaScript that is built into the platform and so works without any additional code
• If for some reason the existing field must remain, add the "Text Area (Rich)" field and copy its text into the existing "Text Area (Long)" on update (and do a copy in the other direction if the existing field is ever changed by some other mechanism)

Answer 2

You can try this way,

<apex:actionFunction action="{!contAction}" name="actionName" rerender="mainPanel">
    <apex:param name="paramName" assignTo="{!strCont}" value=""/>
</apex:actionFunction>


<apex:inputTextArea id="idTest" value="{!strCont}" styleClass="ckeditor" richtext="false"/>

onload updated the inputtextarea into CkEditor

window.onload = function(){
    CKEDITOR.replace('{!$Component.idTest}'); 
}   

On click of any button call the following function, to sync with controller method. getData() method will returns the updated text of the CkEditor

function test(){    
    var objEditor = CKEDITOR.instances['{!$Component.idTest}'];
    var strTest = objEditor.getData()
    actionName(strTest);
}   

Answer 3

I used the following approach :

For the text area being rendered as Rich Text Editor with CKEDItor using :

<apex:inputTextarea richText="false" id="oNextSteps" cols="80" required="true"/>
j$('[id$=oNextSteps]').ckeditor();

Added <apex:inputhidden value="{!textAreaOne}" id="textareaonehidden" /> where textareaone is the controller property.

In JS code ,did the following :

CKEDITOR.instances['oNextSteps'].on('change',function(){                                                                                                      var valueOfTextAreaOne = CKEDITOR.instances['oNextSteps'].getData();                                                                                                                          
        document.getElementById("!$Component.textareaonehidden}").value=valueOfTextAreaOne;
    });

This binded the data with the controller variable.Please share if someone has a better approach, I will mark that as the current answer.