2

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>
4

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.

  • Why not just use getElementsByClassName? I do believe the script would only be included once, but definitely better not to complicate things unnecessarily. – Adrian Larson Mar 27 '17 at 14:54
  • @AdrianLarson getElementsByClassName works, too. I just generally prefer querySelectorAll, probably because it involves less typing, and I'm notoriously lazy when it comes to programming. – sfdcfox Mar 27 '17 at 15:02
  • @sfdcfox, when i enter some text in one box and click on that button again to add the entered text in first box is automatically removed – WantToBeACoder Mar 27 '17 at 15:04
  • @WantToBeACoder Were you able to get the text preserved? It should work as far as I know. – sfdcfox Mar 27 '17 at 15:26
  • @sfdcfox when i click on Add Product Button to add more richtext, at the same time my full vf page gets reRender that's why the entered values won't stay as it is – WantToBeACoder Mar 28 '17 at 5:22
3

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>

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.