javascript - 内联 CKEditor 关闭后获取修改内容

Question

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

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

Answer 1

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

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

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

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

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

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