使用jQuery从CKEditor的iframe中获取内容

我有一个使用CKEditor *(FCKEditor v3)编辑内容的定制CMS。 我也使用jQuery Validation插件在基于AJAX的提交之前检查所有字段是否有错误。 我使用serialize()函数将数据传递给PHP后端。

问题是,serialize会正确地抓取所有的字段,除了在CKEditor中input的实际内容。 像所有其他所见即所得的编辑器一样,这个编辑器也覆盖了现有文本框的iframe。 而序列化忽略了iframe,并只看到文本框的内容,当然,它没有find,从而返回一个空白的内容体。

我的方法是在CKEditor的onchange事件上创build一个钩子,并且同时更新文本框( CKEDITOR.instances.[textboxname].getData()返回内容)或其他一些隐藏的字段。

但是,由于CKEditor仍处于testing阶段,严重缺乏文档,所以我找不到合适的API调用,使我能够做到这一点。

有没有人有任何想法如何去做这个?

12 Solutions collect form web for “使用jQuery从CKEditor的iframe中获取内容”

另一个通用的解决scheme是在你尝试提交表单时运行以下代码

 for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); 

这将强制表单中的所有CKEDITOR实例更新其各自的字段

我刚刚发布了一个jQuery的CKEditor插件,它将在后台处理所有这些而不需要额外的代码: http : //www.fyneworks.com/jquery/CKEditor/

我也一直在努力解决这个问题。 我意识到上述代码不适用于我的原因是,CKEditor实例尚未准备好,当文档属性被引用。 所以你必须调用“instanceReady”事件,并且可以使用文档的事件,因为在此之前它不存在。

这个例子可能适合你:

 CKEDITOR.instances["editor1"].on("instanceReady", function() { //set keyup event this.document.on("keyup", CK_jQ); //and paste event this.document.on("paste", CK_jQ); }); function CK_jQ() { CKEDITOR.tools.setTimeout( function() { $("#editor1").val(CKEDITOR.instances.editor1.getData()); }, 0); } 

这应该做到这一点…

 CKEDITOR.instances["editor1"].document.on('keydown', function(event) { CKEDITOR.tools.setTimeout( function() { $("#editor1").val(CKEDITOR.instances.editor1.getData()); }, 0); }); CKEDITOR.instances["editor1"].document.on('paste', function(event) { CKEDITOR.tools.setTimeout( function() { $("#editor1").val(CKEDITOR.instances.editor1.getData()); }, 0); }); 

编辑:添加部分来更新粘贴后的文本框,也…

我有这样的成功:

 console.log(CKEDITOR.instances.editor1.getData()); 

我采取了一个稍微不同的方法,我认为使用ckeditor的更新函数会更好,并且由于正在使用keyup,所以不需要超时

 CKEDITOR.instances["editor1"].on("instanceReady", function() { //set keyup event this.document.on("keyup", CK_jQ); //and paste event this.document.on("paste", CK_jQ); } function CK_jQ() { CKEDITOR.instances.editor1.updateElement(); } 

这样做不是更好吗:

 CKEDITOR.instances.editor1.on('contentDom', function() { CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/}); }); 

ref: http : //cksource.com/forums/viewtopic.php?f=11& t= 18286

contentDom事件为我工作,而不是instanceReady …我真的想知道事件ae,但我认为他们是专有的…

 var editor = CKEDITOR.replace('editor'); CKEDITOR.instances.editor.on("instanceReady", function(){ this.on('contentDom', function() { this.document.on('keydown', function(event) { CKEDITOR.tools.setTimeout( function(){ $(".seldiv").html(CKEDITOR.instances.editor.getData()); }, 1); }); }); this.on('contentDom', function() { this.document.on('paste', function(event) { CKEDITOR.tools.setTimeout( function(){ $(".seldiv").html(CKEDITOR.instances.editor.getData()); }, 1); }); }); edits_clix(); var td = setTimeout("ebuttons()", 1); }) 

CKEDITOR.instances.wc_content1.getData()将返回ckeditor数据
CKEDITOR.instances.wc_content1.setData()将设置ckeditor数据

我一直试图通过这个工作,但它还没有工作。 你能解释一下你放置这个脚本的位置吗?

我从一个xquery生成我的页面,所以我不能把这个脚本放在页面中,因为它包含“{”这打破了xquery处理。 将脚本放在cdata中会破坏脚本。 所以我把instanceReady监听器放在与创build编辑器相同的脚本中,并调用外部脚本来添加其余的脚本。 例如:

 <script type="text/javascript"> var editor = CKEDITOR.replace( 'editor1' ); editor.on("instanceReady", updateInstance() ) </script> 

那么updateInstance包含:

 function updateInstance() { CKEDITOR.instances["editor1"].document.on('keydown', function(event) { CKEDITOR.tools.setTimeout( function() { $("#editor1").val(CKEDITOR.instances.editor1.getData()); }, 0); }); CKEDITOR.instances["editor1"].document.on('paste', function(event) { CKEDITOR.tools.setTimeout( function() { $("#editor1").val(CKEDITOR.instances.editor1.getData()); }, 0); }); } 

我想用户在询问序列化,我正在挣扎序列化一个表单提交,这给了我很多问题。

这对我来说是有效的:

 $(document).ready(function() { $('#form').submit(function(){ if ( CKEDITOR.instances.editor1.getData() == '' ){ alert( 'There is no data available' );//an alert just to check if its working }else{ var editor_data = CKEDITOR.instances.editor1.getData(); $("#editor1").val(editor_data); //at this point i give the value to the textarea $.ajax({ //do your ajax here }); } return false; }); }); 

我用当前版本解决了这个问题: http : //ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

55行this.submit(function(事件){ – 我加了这个代码:

 if (typeof CKEDITOR !== "undefined") { for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); } 
  • jQuery show()函数显示内联块。 怎么样?
  • 用jQuery创build一个新元素的首选方法
  • 你会如何比较jQuery对象?
  • 如何通过jQuery获得没有特定属性的元素
  • 如何在JavaScript或jQuery中规范HTML?
  • Rails没有重新加载会议上的Ajaxpost
  • 你如何cachingJavascript中的图像
  • jQuery的Ajax等待,直到所有的图像加载
  • 如何在JS文件中添加jQuery
  • jQuery:text()和html()之间有什么区别?
  • 在SetTimeoutrecursion函数(Javascript)上超出最大调用堆栈大小