使用jQuery抓住从CKEditor的的iframe

我有编辑内容使用CKEditor *（FCKEditor的V3）自定义编写的CMS内容。我还使用插件在基于AJAX的提交之前检查所有字段是否存在错误。我正在使用serialize()函数将数据传递给PHP后端。使用jQuery抓住从CKEditor的的iframe

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

我的这种方法是创建一个钩子上的CKEditor的的onchange事件，并同时更新文本框（CKEDITOR.instances.[textboxname].getData()返回的内容）或在编辑器中所做的任何更改一些其他的隐藏字段。

但是，由于CKEditor仍处于测试阶段，严重缺乏文档，我无法找到一个合适的API调用，使我能够做到这一点。

有没有人有关于如何去做这个？

来源

2009-05-29 miCRoSCoPiC_eaRthLinG

我已经想出了尽可能多的从iframe中获取内容： $（'#cke_contents_body iframe'）.contents（）。find（'body'）.html（）...最接近直接可寻址的元素，是一个带有id的td，'cke_contents_body'。 CKEditor用这个td包装了iframe。 – 2009-05-29 03:49:09

还是要去..一种通过挂接到CKEditor的变化事件来自动更新带有数据的文本框的方法。有任何想法吗？任何人？ – 2009-05-29 03:54:20

新的CKEditor版本已经解决了这个问题 – Ivan 2011-07-06 18:09:22

这应该这样做...

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); 
});

编辑：增加了部分粘贴后更新的文本框，太...

来源

2009-05-29 04:25:08 Stobor

感谢您的回复......但它一直告诉我：“CKEDITOR.instances.editor1.document未定义”！ – 2009-05-29 09:20:56

顺便说一句，你能解释一下为什么你在这里使用setTimeout而不是直接在按键时复制内容？ – 2009-05-29 09:23:06

用你的文本框名替换editor1。setTimeout是为了确保我们在添加按键之后获取内容，而不是之前。 – Stobor 2009-06-01 04:03:56

我也一直在想今天解决这个问题。我意识到上述代码不适用于我的原因是因为在引用文档属性时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); 
}

来源

2009-09-24 16:17:07

我一直在尝试整夜得到这个工作，但还没有成型。你能解释一下你放置这个脚本的位置吗？

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

<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); 
}); 

}

来源

2009-11-13 01:05:11 Fraser

我刚刚发布了一个CKEditor的jQuery插件，这将照顾这一切的背景，没有任何额外的代码： http://www.fyneworks.com/jquery/CKEditor/

来源

2009-11-25 20:23:26

我采取了一个稍微不同的方法我认为使用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(); 
}

来源

2009-12-18 17:36:09 mcgrailm

到这一点的另一个通用的解决方案，可运行以下每当你尝试提交表单

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

这将迫使所有CKEDITOR实例的形式来更新各自领域

来源

2010-01-05 16:28:15

我成功与此：

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

来源

2010-03-13 03:27:12

这样做会更好：

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

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

来源

2010-04-13 01:33:25 netfed

的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); 
})

来源

2011-02-17 10:34:46 GoodNews

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

来源

2011-07-22 20:08:09 Mahesh

我觉得用r正在询问关于序列化的问题，我正在努力序列化一个表单来提交，这给了我很多问题。

这是为我工作：

$(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; 
    }); 
});

来源

2011-11-09 16:14:56 user731144

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

后线55this.submit（函数（事件）{ - 我添加此代码：

if (typeof CKEDITOR !== "undefined") { 
    for (instance in CKEDITOR.instances) 
     CKEDITOR.instances[instance].updateElement(); 
}

来源

2012-01-17 12:45:45 heuri

使用jQuery抓住从CKEditor的的iframe

回答

相关问题