ckeditor getData()似乎没有按预期工作

时间:2012-12-27 23:29:28

标签: javascript ckeditor

首先,我首先要说我是javascript的新手,所以希望这不是一个完整的问题。话虽这么说,下面的代码应该在用户点击它时提醒编辑器的值。

<script type='text/javascript'>
function openEditor(){
html = "Hello World";
config = {
startupFocus : true
};
editor = CKEDITOR.appendTo( 'textBox', config, html );


 if (editor) {
    editor.on('blur', function(event) {
        var ckvalue = CKEDITOR.instances.editor.getData();
        alert(ckvalue);
    });
 }
}
</script>
<html>
<a href='#' onclick='openEditor()'>Open Editor</a><br />
<div id='textBox'></div>
</html>

相反谷歌Chrome控制台报告:

"Uncaught TypeError: Cannot call method 'getData' of undefined "

现在我改变了

var ckvalue = CKEDITOR.instances.editor.getData();

var ckvalue = CKEDITOR.instances.editor1.getData();

有效。这让我感到困惑,因为我从未声明过editor1实例。我希望有更多经验的人可以向我解释为什么当编辑器没有时,editor1会起作用。

这是我正在谈论的一个工作示例:http://jsfiddle.net/s3aDC/6/

2 个答案:

答案 0 :(得分:5)

editor是一个指向CKEDITOR.instances.editor1的JS变量。见editor === CKEDITOR.instances.editor1 // true

此外,事件回调在editor上下文中执行,因此this指向editor

editor.on('blur', function(event) {
    var ckvalue = this.getData();
    alert(ckvalue);
});

您可以在初始化编辑器时定义它:

var editor = CKEDITOR.appendTo( 'textBox', {
    on: {
        blur: function( event ) {
            console.log( this.getData() );
        }
    }
} );

你的代码中绝对应该avoid global variables! ;)

答案 1 :(得分:1)

CKEditor从以下位置获取编辑名称:

    如果编辑器未处于“追加”模式,则
  1. textarea / editable元素的id或name属性:https://github.com/ckeditor/ckeditor-dev/blob/master/core/editor.js#L71
  2. 生成唯一编辑者名称https://github.com/ckeditor/ckeditor-dev/blob/master/core/editor.js#L97
  3. 的函数

    在您的情况下,编辑器由appendTo()方法创建,因此CKEditor会自动生成名称editor1,然后editor2等。CKEDITOR.instances对象包含其下的所有编辑器实例名称,这就是存在CKEDITOR.instances.editor1的原因。

    您已将编辑器实例分配给全局editor变量。但这与编辑器名称完全不同 - 您可以根据需要将编辑器实例分配给尽可能多的变量。

    顺便说一句。在使用之前,您应该使用var语句声明变量。