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时，再次触发change事件，并且event.editor.getData（）在调用setData之前返回html。在实际设置数据之前是否触发了change事件？我尝试设置为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

1 个答案: