Question

我在内联模式下使用CKEditor 4.4.4版本允许用户编辑页面上的几乎所有文本内容 - 基本上我正在使用CKEditor的“大规模内联编辑”演示功能，它来自CKEditor ZIP

我无法弄清楚我是如何知道用户何时完成编辑DOM元素并关闭了CKEdtitor对话框（可能是当CKEditor将内容从其内部编辑器复制到DOM元素时）。我找不到（工作）onblur，onclose或类似事件。

Answer 1

首先 - 当您使用编辑器时，DOM会被实时修改。这仅仅是因为您编辑的内容是您所看到的，您看到的是DOM中的内容。或多或少......

...因为编辑器中的DOM不是数据。您应该永远尝试将数据库保存为$( '.editor' ).html()。这是错误的。

相反，每个编辑器实例都有一个getData()方法，该方法返回您感兴趣的值。编辑器实例位于id对象下editor<num>（创建它们的元素）或自动生成的名称（ckeditor.js）。

现在。没有单一的定义＆＃34;当用户完成编辑＆＃34;时，我会坚持最受欢迎的一个 - ＆＃34;当用户模糊的编辑器＆＃34;。假设您的页面上有许多内联编辑器并且所有内联编辑器都是自动创建的，那么在附加CKEDITOR.on( 'instanceCreated', function( evt ) { var editor = evt.editor; editor.on( 'blur', function() { console.log( 'Saving...', editor.name, editor.getData() ); } ); } );脚本之后您将需要使用类似的内容：

{{1}}

此代码将为每个创建的实例添加CKEDITOR.instances侦听器。当用户模糊编辑器时，将记录编辑器名称及其数据。

Answer 2

我认为电子是正确的，ckeditor直接改变DOM元素，并且没有复制onBlur发生。在布鲁尔事件中也没有“原生”的ckeditor。

那就是说，我找到了一种生成onFocus和onBlur事件的方法：

ckeditior提供了currentInstance事件，无论何时触发有一个焦点变化。 http://docs.ckeditor.com/#!/api/CKEDITOR-event-currentInstance
当前添加了一个css类.cke_focus 聚焦元素。

使用这两个事实（以及用于简单演示的jQuery），我们可以编写自己的onBlur和onFocus事件：

var onCurrentInstance = function(){
    var focused = $();

    var onBlur = function(obj){
        console.log("Blur:", obj);
    };

    var onFocus = function(obj){
        console.log("Focus:", obj);
    };          


    return function(e){
        var cke_focus = $(".cke_focus");

        if(cke_focus.size() > 0) onFocus(cke_focus);
        if(focused.size() > 0) onBlur(focused);

        focused = cke_focus;
    };

};

CKEDITOR.on( "currentInstance", onCurrentInstance());

这是一个非常基本的示例，可以复制并粘贴到ckeditor附带的samples/inlineall.html示例中。不要忘记在示例中添加jQuery：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

UPDATE：这里的功能相同，允许绑定多个onFocus和onBlur事件：

var bindFocusBlur = function(onFocus, onBlur){
    var focused = $();

    return function(e){
        var cke_focus = $(".cke_focus");

        if(cke_focus.size() > 0 && typeof onFocus === "function"){
            onFocus(cke_focus);
        }
        if(focused.size() > 0 && typeof onBlur === "function"){
            onBlur(focused);
        }

        focused = cke_focus;
    };
};

像这样使用：

var onFocus = function(){};
var onBlur = function(){};

var onFocus2 = function(){};

CKEDITOR.on( "currentInstance", bindFocusBlur( onFocus, onBlur ));

CKEDITOR.on( "currentInstance", bindFocusBlur( onFocus2 ));

Answer 3

我认为没有任何“编辑完成”的事件。我认为ckeditor正在研究html元素本身而不是“内部编辑器”。

在内联CKEditor关闭后获取修改后的内容

3 个答案: