Render RichTextArea in salesforce

Hi All,

I recently encountered the following  error while rerendering a rich text area.

Oops! getting 'Rerender is not currently supported with rich text editing enabled' error while trying to Rerender set of block in Visualforce page.. 

After some research cheeky got some idea to do workaround this.

Sometimes we may need out of Salesforce knowledge to solve interesting Salesforce error.

In order to have a workaround we need javascript and CkEditor basic knowledge to solve this error.

CkEditor  --> is an open source WYSIWYG text editor designed to bring common word processor features directly to web pages, simplifying their content creation. It aims to be lightweight and requires no client-side installation.

let me break down this into simple steps to achieve this work around.

1. To download CKEditor click here. Select and download a CKEditor package, My suggest is to select standard package and click on download button. Wow you complete downloading CKEditor package.

2. Now next step is to add CKEditor zip to Salesforce static resource so that you can easily include CKEditor in Visualforce page. Login to Salesforce org -> Setup -> Develop -> Static Resource -> Click 'New' ->  Name - CKEditor , File - choose  CKEditor  zip file which is downloaded , cache control - public -> Save.Successfully done with adding CKEditor zip file in Salesforce org.

3. Now let's see how to include CKEditor static resource in your Visualforce page.add below line in your Visualforce page.

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

4. Use CKEditor JavaScript style class to your rich text area displaying tag as below.

<apex:inputtextarea  styleClass="ckeditor" richtext="false" value="{!testing.richtextarea__c}" /> 

5. While rerender if there is any rich text area field is there then Visualforce page will throw an error so we have to do workaround by using CKEditor. CKEditor is changing rich text area field type to text area and copying rich text area field value to text area field until visual force page completes rerender process, after that again CKEditor will revert  text area and it's content to rich text area yes.

To help CKEditor to do this process we need to add below script in your page.

<script type="text/javascript">
   function ReloadCKEditor() {
   alert("Hi");
   for(name in CKEDITOR.instances)
   {
       delete CKEDITOR.instances[name];
   }
   CKEDITOR.replaceAll();
}

6. Now we are last step to complete this..Finally added JavaScript to do workaround but need to call JavaScript function as a action support in the part where rerender taking place as below,

<apex:actionSupport event="onchange" rerender="theBlock" oncomplete="ReloadCkEditor();"/>

Congrats!  We have successfully completed the work around. If have done the above steps with out any error you will see the output as shown below laugh..

Hope this post will helps you to solve 'Rerender is not currently supported with rich text editing enabled' error.

Let me know in comments where you have liked it or not. 

Rating: 
No votes yet