CKEditor正文上的Document.getElementById返回空

本教程将介绍CKEditor正文上的Document.getElementById返回空的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

CKEditor正文上的Document.getElementById返回空 教程 第1张

问题描述

我需要将Salesforce提供的富文本编辑器的拼写检查属性设置为true。但是,指定属性的正文组件始终返回NULL。

因此,我无法更改属性值。我做错了什么?我甚至无法使用jQuery选择器进行相同操作。

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

推荐答案

太快了。

只要遇到此行代码,此脚本就会触发。当时,原始的<textarea>仍然存在于页面上,装饰器没有运行(装饰器隐藏原始标签,而使用整个RTF编辑器注入<iframe>)。您可以对其进行验证,因为在显示此alert()时执行会停止。

最干净的方法是覆盖onload函数(或修饰器运行的任何位置),类似于这些POST的操作方式:

    http://bobbuzzard.blogspot.co.uk/2011/05/onload-handling.html

    https://developer.salesforce.com/forums?id=906F0000000957DIAQ

不确定原因,但即使是这样的自定义onload似乎也太快了(我没有时间进一步调试它)。

所以,尽管它很难看-这似乎对我很管用:

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

您可以随意尝试,如果您愿意,可以使用jQuery的contents()对其进行美化.这里有很多关于怎么使用jQuery很好地访问IFRAME的问题,例如How to get the body's content of an iframe in Javascript?

好了关于CKEditor正文上的Document.getElementById返回空的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。