Document.getElementById on CKEditor body returning null

Question

I need to set the spellcheck attribute of the rich text editor provided by Salesforce to true. However, the body component on which the attribute is specified always returns null.

Due to this I am not able to change the attribute value. What am I doing wrong? I am not even able to use jQuery selectors for the same.

<apex:page >
  <apex:form >
    <apex:inputTextarea richText="true" id="rta"/>
  </apex:form>
  <script>
    alert(document.getElementById('j_id0:j_id1:rta_rta_body'));
  </script>
</apex:page>

Answer 1

It's too soon.

This script fires as soon as this line of code is encountered. At that time the original <textarea> is still present on the page and the decorators didn't run (decorators hide the original tag and inject an <iframe> with whole RTF editor instead). You can verify it because the execution stops while it's showing this alert().

The cleanest way would be to override the onload function (or wherever it is that decorators run) similar to how these posts do it:

1. http://bobbuzzard.blogspot.co.uk/2011/05/onload-handling.html
2. https://developer.salesforce.com/forums?id=906F0000000957DIAQ

Not sure why but it seems even such custom onload is too soon (I don't have time to debug it further).

So, as ugly as it is - this seems to work for me:

<apex:page >
    <apex:form >
        <apex:inputTextarea richText="true" id="rta"/>
    </apex:form>
    <script>
    function setSpellChecker(){
        var iframe = document.getElementById('j_id0:j_id1:rta_frame');
        var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        iframeDocument.getElementsByTagName('body')[0].spellcheck = true;
    }
    window.setTimeout(setSpellChecker, 1000); // fire after 1 second
    </script>
</apex:page>

Feel free to experiment, prettify it with jQuery's contents() if you want... There are lots of questions over here how to nicely access an iframe with jQuery, for example How to get the body's content of an iframe in Javascript?