CKEditor setData 未清除或更改 rte 中的文本答案

【问题标题】：CKEditor setData not clearing or changing text in rteCKEditor setData 未清除或更改 rte 中的文本
【发布时间】：2012-11-14 19:14:37
【问题描述】：

我在 Backbone 视图中有一个 CKEditor 实例，它带有一个插件，可以在点击时将编辑器中的任何文本发布到我的网站。我也想在点击时清除 CKEditor，但使用 setData 不起作用。它会闪烁，好像某事正在发生，但随后会重置为已经存在的相同数据。

在插件内部是这样调用的：

注意：THIS 是引用主干视图的变量

CKEDITOR.plugins.add( 'post', {
    init: function( editor ) {
        editor.addCommand('post', {
            exec: function(editor) {
                THIS.model.postMessageAttempt(editor.getData());
                THIS.options.data = "";
                editor.setData("");
            }
        });
        editor.ui.addButton('Post', {
            label: THIS.i18n.postText(),
            command: 'post'
        });

    }
} );

我也尝试过使用setData("some text") 和THIS.editor.setData("")（我引用了保存在视图中的编辑器），但两者的结果相同。关于出了什么问题的任何想法？

编辑
我也尝试过使用 CKEditor 与 jQuery 的集成与此调用 THIS.$el.find('textarea' + this.id).val(""); 并且它不再闪烁，但它仍然没有清除编辑器。

【问题讨论】：

所以除了setData(...) 什么都没做之外，一切正常，对吧？
如果你setData('<p></p>')，它是否有效？
正确。这也行不通。
所以getData 有效，setData 无效，并且两个editor 变量都引用相同的东西。您是否在 Backbone 之外尝试过这个？我想知道 CK 和 Backbone 是否为了控制 DOM 元素而互相争斗。
我没有。不过，我可以使用insertHtml，所以如果是的话，那只是在这种非常特殊的情况下。

标签： javascript jquery backbone.js ckeditor backbone-views

【解决方案1】：

问题是双重的：首先，setData 在函数末尾调用函数afterSetData，而该函数调用getData。 getData 在函数开头调用函数beforeGetData，that 函数调用setData。我认为我们的目标是解决这样一个事实，即有很多浅层引用而不是深层引用，但即使在未缩小的 ckeditor.js 中，也不清楚为什么要这样做。

其次，我还调用disableEnablePost，以便在许多事件（焦点、键[向下]等）上正确启用/禁用从编辑器到站点的发布. disableEnablePost 调用了getData，这导致我在post 插件中调用setData 时出现时间问题。

问题：

CKEDITOR.plugins.add( 'post', {
    init: function( editor ) {
        editor.addCommand('post', {
            exec: function(editor) {
                THIS.model.postMessage(editor.getData());
                THIS.options.data = "";
                editor.setData("");
            }
        });
        editor.ui.addButton('Post', {
            label: THIS.i18n.postText(),
            command: 'post'
        });
        editor.on('key', function (event) {
            THIS.disableEnablePost(editor.getCommand( 'post' ), event);
        });
    }
} );

这是我的解决方案：

CKEDITOR.plugins.add( 'post', {
    init: function( editor ) {
        editor.addCommand('post', {
            exec: function(editor) {
                THIS.model.postMessage(editor.getData());
            }
        });
       ...
    }
} );

model.postMessage 现在会在完成时触发一个事件，该事件被视图捕获，然后调用此函数：

clearRTE: function() {
    this.editor.setData("");
    this.options.data = "";
}

最后，我更改了disableEnablePost，使它不会每次都调用getData，这不是一个好习惯。现在，它调用editor.getSnapshot()，它更轻量级，没有数据处理，也没有调用getData或setData，因此更适合频繁使用。

【讨论】：