使用 jQuery 从 CKEditor 的 iframe 中抓取内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/924145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to grab the content from CKEditor's iframe
提问by miCRoSCoPiC_eaRthLinG
I have a custom-written CMS that uses CKEditor*(FCKEditor v3) for editing content. I'm also using the jQuery Validationplugin to check all fields for error prior to AJAX-based submission. I'm using the serialize()function to passing the data to the PHP backend.
我有一个自定义编写的 CMS，它使用CKEditor*(FCKEditor v3) 来编辑内容。我还使用jQuery 验证插件在基于 AJAX 的提交之前检查所有字段是否有错误。我正在使用serialize()函数将数据传递到 PHP 后端。
Problem is, serialize manages to grab all fields correctly, except for the actual content typed in CKEditor. Like every other WYSIWYG editor, this one too overlays an iframe over an existing textbox. And serialize ignores the iframe and looks only into the textbox for content, which, of course, it doesn't find, thus returning a blank content body.
问题是，序列化设法正确抓取所有字段，除了在 CKEditor 中键入的实际内容。与其他所有 WYSIWYG 编辑器一样，这个编辑器也将 iframe 覆盖在现有文本框上。而 serialize 会忽略 iframe 并只查看文本框的内容，当然，它没有找到，因此返回一个空白的内容正文。
My approach to this is to create a hook onto the onchangeevent of CKEditor and concurrently update the textbox (CKEDITOR.instances.[textboxname].getData()returns the content) or some other hidden field with any changes made in the editor.
我的方法是在CKEditor的onchange事件上创建一个钩子，并同时更新文本框（CKEDITOR.instances.[textboxname].getData()返回内容）或其他一些隐藏字段，并在编辑器中进行任何更改。
However, since CKEditor is still in it's beta stage and severely lacks documentation, I can't find a suitable API call that'll enable me to do so.
但是，由于 CKEditor 仍处于测试阶段并且严重缺乏文档，我找不到合适的 API 调用来使我能够这样做。
Does anyone have any idea on how to go about this?
有没有人知道如何解决这个问题？
回答by Gabriele Petrioli
Another generic solutions to this would be to run the following whenever you try to submit the form
对此的另一个通用解决方案是在您尝试提交表单时运行以下命令
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
This will force all CKEDITOR instances in the form to update their respective fields
这将强制表单中的所有 CKEDITOR 实例更新它们各自的字段
回答by Diego A.
I've just released a CKEditor plugin for jQuery which will take care of all this in the background without any extra code: http://www.fyneworks.com/jquery/CKEditor/
我刚刚为 jQuery 发布了一个 CKEditor 插件，它将在后台处理所有这些，无需任何额外代码：http: //www.fyneworks.com/jquery/CKEditor/
回答by Diego A.
I have also been trying to fix this problem today. I realised that the reason the above code isnt working for me is because the CKEditor instance isnt ready yet when the document property is referenced. So you have to call the "instanceReady" event and within that the document's events can be used, because prior to that it just doesnt exist.
我今天也一直在努力解决这个问题。我意识到上面的代码对我不起作用的原因是因为当引用文档属性时 CKEditor 实例还没有准备好。因此，您必须调用“instanceReady”事件，并且在该事件中可以使用文档的事件，因为在此之前它不存在。
This example might work for you:
这个例子可能对你有用：
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);
}
回答by Stobor
This should do it...
这个应该可以...
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);
});
edit: added section to update textbox after pastes, too...
编辑：添加部分以在粘贴后更新文本框，也是...
回答by a.m.
I had success with this:
我在这方面取得了成功：
console.log(CKEDITOR.instances.editor1.getData());
回答by netfed
Wouldn't it be better to do just this:
这样做不是更好吗：
CKEDITOR.instances.editor1.on('contentDom', function() {
CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/});
});
回答by GoodNews
The contentDom event worked for me and not the instanceReady... I would really like to know what the events ae, but I assume they are proprietary...
contentDom 事件对我有用，而不是 instanceReady ......我真的很想知道事件是什么，但我认为它们是专有的......
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);
})
回答by Mahesh
CKEDITOR.instances.wc_content1.getData()will return the ckeditor dataCKEDITOR.instances.wc_content1.setData()will set the ckeditor data
CKEDITOR.instances.wc_content1.getData()将返回 ckeditor 数据CKEDITOR.instances.wc_content1.setData()将设置 ckeditor 数据
回答by mcgrailm
I took a slightly different approach I figured it would be better to use ckeditor's update function and since keyup was being used the timeout wasn't needed
我采取了一种稍微不同的方法，我认为使用 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();
}
回答by user731144
I think the user was asking about serializing, I was struggling serializing a form to submit and it was giving me a lot of issues.
我认为用户在询问序列化，我正在努力序列化要提交的表单，这给了我很多问题。
This is what worked for me:
这对我有用：
$(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;
});
});
