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

Question

我正在尝试创建一个类似于堆栈溢出上的标记功能的插件。该插件将 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(( 在我调用 setData 之前返回 html。更改事件是否在实际设置数据之前触发？我尝试将内部选项设置为 true，但数据似乎没有更新。

Answer 1

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

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

但我有一个很好的信息。使用CKEditor4.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 里程碑以获取更新。

发布后，我可以为您的功能提供一些示例实现 - 但我相信使用新插件会像馅饼一样简单。