使用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调用，使我能够做到这一点。
有没有人有任何想法如何去做这个？
另一个通用的解决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(); }
