All TextArea replace with the Rich Text

Question

I have one visualforce page and trying to display only Notes as a Richtextarea but not sure why all TextArea are replacing with the rich text

When i am clicking on Add Product Button then all textarea displayed on the page is replaced with the richtextarea don't know why....

Can anyone please take a look into this ?

function ReloadCKEditor() {{
      $(".ckeditor").each(function(){  CKEDITOR.replace('ckeditor1');} );
}

<apex:commandButton value="Add Product" action="{!AddProduct}" rerender="theForm" oncomplete="ReloadCKEditor();">
      <apex:param name="ProductIndex" value="{!G.Index}"/>                                                        
</apex:commandButton>

<apex:column breakBefore="true" colspan="5">
      <apex:outputLabel value="Note : " style="font-weight:bold;" />
      <apex:includescript value="{!URLFOR($Resource.CKEditor, 'ckeditor/ckeditor.js')}" />
      <apex:inputTextarea id="ckeditor1" styleClass="ckeditor" richtext="false" value="{!PW.TempProductSelection.RichTextArea__c}" >
      </apex:inputTextarea>
</apex:column>

Answer 1

The Id of an apex:inputTextArea is modified by the runtime system that guarantees it will be unique on the page. As a side effect, this means you can't generally use those Id values without some extra effort, such as using $Component. Fortunately, CKEditor.replace supports using an element instead, so this should probably work:

function ReloadCKEditor() {
    [].forEach
        .call(document.querySelectorAll('.ckeditor'), 
            function(v) { CKEDITOR.replace(v);
        });
}

There's no need to load jQuery in to your page for this. As a side note, you probably shouldn't put apex:includeScript within a loop, either. It's sufficient to simply place it at the top of the page. I'm not sure if the compiler is smart enough to only include the script once, but this could cause some unexpected errors.

Answer 2

First, you are loading the CKEditor script in a wrong place. You must load it at the start of your VF page.

Then, the id you put on your apex:inputTextArea is not the one generated by Salesforce at the page rendered. You will have to request by using the class of the input, then by sending its id to the plugin using the jquery attr() method.

Here's the right code:

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

function ReloadCKEditor() {{
      $(".ckeditor").each(function(){  CKEDITOR.replace($(this).attr('id'));} );
}

<apex:commandButton value="Add Product" action="{!AddProduct}" rerender="theForm" oncomplete="ReloadCKEditor();">
      <apex:param name="ProductIndex" value="{!G.Index}"/>                                                        
</apex:commandButton>

<apex:column breakBefore="true" colspan="5">
      <apex:outputLabel value="Note : " style="font-weight:bold;" />
      <apex:inputTextarea styleClass="ckeditor" richtext="false" value="{!PW.TempProductSelection.RichTextArea__c}" >
      </apex:inputTextarea>
</apex:column>