1

While trying to call JavaScript functions on <apex:inputtextarea> with rich text enabled the call is not being made and alerts are not being displayed.

<apex:inputTextarea richText="true" id="oAssessAdditionalInformation" cols="80" required="false" value="{!textAreaOne}"label="Additional Information"    rendered="true" onclick="mouseClickNew()" /> 

Javascript code:

function SaveUpdateEmailRecord(){
console.log("Hello, I am in here !");
alert("Hello !!!");
}

I even tried <apex:actionSupport event="onmouseout" onsubmit="SaveUpdateEmailRecord"/> inside the <apex:inputtextarea> tags and also tried directly calling <apex:actionfunction> but with no luck.

The section is not being re-rendered, the whole page will refresh in the future.

Any pointers?

  • the standard stylesheets are disabled .... it is working fine for <apex:image> tags on the same page. – chinmay bhusari Feb 25 '16 at 9:12
2

This will little tricky to achieve.

The reason is that when we add <apex:inputTextarea richText="true" ... it add hidden text area and its own iframe that shows as a text editor.

<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" title="Rich Text Editor, j_id0:j_id4:oAssessAdditionalInformation" aria-describedby="cke_32" tabindex="0" allowtransparency="true"></iframe>

So when you add events to your text area its not get added to the text area which is displayed to user.

Now how to achieve it:

You can add custom JS to ck editor for example add below JS to your page and you will be able to see alert when you change anything in editor.

<script>

   for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
    }

   </Script>

Same way you can capture other events.

  • Awesome this works!! Thankyou :-) – chinmay bhusari Feb 25 '16 at 11:42
2

You need to know few points before trying this:

  • Any html attribute used within apex component should have html- prefix like <apex:inputtextarea html-onclick="alert('hi')"/>

  • When you enable RichText='true' it is no more a normal HTML text area component. Salesforce internally uses CKEditor to render rich text boxes.

  • It is little complicated in the way it renders and you cannot manipulate as normal HTML component (because it hides the html textarea, renders a new iframe with toolbar, communicates through iframe on event change)

  • I am not sure whether there is a way to communicate from Apex Component to CKEditor currenly, but this will give generic idea on CKEditor https://stackoverflow.com/a/11772863/1343065

  • Thanks for the info .. I will try it out and let you know. – chinmay bhusari Feb 25 '16 at 9:41
  • 1
    It throws back the error cannot override attribute 'onclick' on component <apex:inputtextarea> when i add html-onclick="JS function" – chinmay bhusari Feb 25 '16 at 9:48
  • I have linked the CKEditor solution to the stackoverflow answe. Did you had a chance to look into that ? – karthikselva Feb 25 '16 at 12:44
  • CKEditor is the worst. When using it to render rich text area it breaks the binding of the property with controller and does not sync back data. Any ideas ? – chinmay bhusari Mar 5 '16 at 9:20
  • @chinmaybhusari I am not sure why this is coming up now – karthikselva Mar 5 '16 at 9:23

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.