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')}" />


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.

3 Answers 3


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)
  • I am using ckeditor because rich text area's in Sales force do not allow rerendering. I cannot use standard rich text area Mar 6, 2016 at 11:06
  • @chinmaybhusari I've added this comment to the question so it stands out a bit more and the edit will push your question back to the top of the "active" question list.
    – Keith C
    Mar 6, 2016 at 11:20
  • Okay thanks a lot Keith appreciate your commitment. thank-you for taking time to help me out . thanks a ton Mar 6, 2016 at 11:24
  • @chinmaybhusari One other thought is that perhaps Salesforce don't support the re-render where CKEditor is used because it is hard (e.g. state in JavaScript objects) to achieve.
    – Keith C
    Mar 6, 2016 at 13:10
  • Hmm impossible....ya maybe . I tried with tinymce and it was working fine. But read online that tinymce is not that stable and sales force uses ckeditor so went with this one Mar 6, 2016 at 13:35

You can try this way,

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

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

onload updated the inputtextarea into CkEditor

window.onload = function(){

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()
  • Did it work for you? Mar 6, 2016 at 14:58
  • I tried this...I get the error Stack size exceeded in console of chrome browser and it does not let me execute the action.....the action has other variables Mar 6, 2016 at 15:35
  • Yes I have executed the same code, in my case have displaying the data onload and on submit click got the ckeditor text. By using .getData() will get the all updated ckeditor text. If possible please share your code here
    – apKash
    Mar 6, 2016 at 19:19
  • I used the same code as mentioned above in your answer. One if the senior person told me that as there were too many bindings and getters and setters in my code the stack depth of the browser has reached and the above code did not work for me. Mar 15, 2016 at 11:18

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"/>

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();                                                                                                                          

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

  • facing the same problem, did you get any other solution without hidden field? I'm having a lot of editors on my page, and currently I'm using another rich text field, so changes to use hidden field with every ckeditor is a bit complex task! Jan 23, 2020 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.