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

【问题标题】：Get modified content after inline CKEditor closes在内联 CKEditor 关闭后获取修改的内容
【发布时间】：2014-10-14 22:02:00
【问题描述】：

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

我想不通的是，我如何知道用户何时完成了对 DOM 元素的编辑并关闭了 CKEditor 对话框（大概是在 CKEditor 将内容从其内部编辑器复制到 DOM 元素时）。我找不到（工作的）onblur、onclose 或类似事件。

【问题讨论】：

标签： javascript ckeditor

【解决方案1】：

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

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

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

现在。 “当用户完成编辑时”没有单一的定义，所以我将坚持最流行的定义 - “当用户模糊编辑器时”。假设您的页面上有许多内联编辑器并且都是自动创建的，您将需要在附加 ckeditor.js 脚本后使用类似的内容：

CKEDITOR.on( 'instanceCreated', function( evt ) {
    var editor = evt.editor;
    editor.on( 'blur', function() {
        console.log( 'Saving...', editor.name, editor.getData() );
    } );
} );

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

【讨论】：

谢谢，ckeditor 网站上是否有一个页面列出了我们可以挂钩的事件？我找不到它，所以不知道 ckeditor blur，而是使用 jQuery 版本。
没有单一的列表，因为事件用于许多组件，并且可能有数百个。但对你来说最重要的是CKEDITOR.editor。所有这些都列在 API 文档中。
也许是时候编写一个对用户更友好的文档了，因为我也没有找到 blur 事件。
非常欢迎所有提案（您可以在github.com/ckeditor/ckeditor-docs 上打开问题）。虽然，我不知道怎么会错过这个事件，因为当谷歌搜索“CKEditor blur event”时它会弹出几个结果（虽然不是直接），并且是docs.ckeditor.com搜索栏中的第一个结果。

【解决方案2】：

我认为 electron 是对的，ckeditor 直接改变了 DOM 元素，并且没有复制 onBlur 发生。也没有“本机”ckeditor onBlur 事件。

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

ckeditor 提供了一个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>

更新：这里是相同的功能，以更通用的方式允许绑定多个 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 ));

【讨论】：

【解决方案3】：

我认为没有任何“编辑完成”之类的事件。我认为 ckeditor 正在处理 html 元素本身，而不是在“内部编辑器”中。

【讨论】：