2

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.

2

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 – chinmay bhusari Mar 6 '16 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 '16 at 11:20
  • Okay thanks a lot Keith appreciate your commitment. thank-you for taking time to help me out . thanks a ton – chinmay bhusari Mar 6 '16 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 '16 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 – chinmay bhusari Mar 6 '16 at 13:35
1

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);
}   
  • Did it work for you? – chinmay bhusari Mar 6 '16 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 – chinmay bhusari Mar 6 '16 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 '16 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. – chinmay bhusari Mar 15 '16 at 11:18
0

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.

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.