Ckeditor 问题在 onchange 事件期间调用 setData

Question

我正在尝试创建一个与 Stack Overflow 上的标记功能类似的插件。该插件向编辑器添加了一个 onchange 事件，然后检查数据以查看用户是否输入了标签，并用 div.

替换找到的任何标签

CKEDITOR.plugins.add('tagit', {
    icons: '',
    init: function (editor) {
        var tags = ['MyTag'],
            tokens = [];

        editor.on('change', function (event) {
            var tokenUpdated = false;
            tokens = tokenize(event.editor.getData());
            for (var tokenIndex = 0; tokenIndex < tokens.length; tokenIndex++) {
                var token = String(tokens[tokenIndex]);
                if (!token.match(/tagit/gmi) && tags.some(function (tag) { return token.indexOf(tag) >= 0; })) {
                    tokens[tokenIndex] = '<div class="tagit">' + tokens[tokenIndex] + '</div>';
                    tokenUpdated = true;
                }
            }
            if (tokenUpdated) {
                event.editor.setData(tokens.join(''));
            }
        });

        var tokenize = function (data) {
            var match = '(<div class="tagit">.*?<\/div>)';
            for (var i = 0; i < tags.length; i++) {
                match += '|(' + tags[i] + ')';
            }
            var re = new RegExp(match, "gmi");
            return data.split(re);
        }
    }
});

问题是当我调用 setData 时，更改事件再次触发，并且 event.editor.getData() returns html 在我调用 setData 之前。更改事件是否在实际设置数据之前触发？有一个内部选项我尝试设置为 true 但数据似乎没有更新。

Answer 1

您正在更改编辑器内容，因此 change 事件将使用 editor.setData 函数调用是很自然的。 TBO 我认为你的实现有一个比循环调用更重要的问题 - 你正在通过正则表达式比较 HTML 内容。这是不好的做法，在此实施过程中您会遇到更多问题。

此功能并不明显，需要使用文档选择，而不是简单地查询其内容（也是出于性能原因）。

但是我有一个很好的信息。对于 CKEditor 4.10，我们正在发布新的插件，这些插件可以很容易地用于创建您正在谈论的功能 - 特别是 textmatch 和 textwatcher。提到的插件将与 autocomplete 和 mentions 插件一起提供。您可以阅读更多关于我们在 GH 方面的进展：

提及：https://github.com/ckeditor/ckeditor-dev/issues/1703

自动完成：https://github.com/ckeditor/ckeditor-dev/issues/1751

4.10 发布时间定在 6 月 26 日，但可能会更改，请查看 GH milestones 了解更新。

发布后，我可以为您的功能提供一些示例实现 - 但我相信使用新插件它会很容易。

Ckeditor 问题在 onchange 事件期间调用 setData

Ckeditor issue calling setData during onchange event

ckeditor

ckeditor4.x