根据单词列表在 TinyMCE 中为单词添加颜色

如何解决根据单词列表在 TinyMCE 中为单词添加颜色

使用 TinyMCE，最新版本。

在正文中，我想突出显示某些单词。这些词将在列表中定义。

示例：

var words = ["dave","walk","train","late"];

内容示例：

var content = "Dave had to walk to the train station,which made him late for his train.";

预期结果：

我已经浏览了 TinyMCE 上的文档，但找不到任何合适的内容。

解决方法

如果其他人正在寻找相同的解决方案，我会回答这个问题。

我设法找到了一种方法来做到这一点，虽然这可能不是最好的方法，但它符合我的要求。

TinyMCE 初始化后，我需要触发一个函数，用编辑过的版本替换内容，为此我使用了“init_instance_callback”方法。

init_instance_callback: "myCustomInitInstance",

并且我在 TinyMCE 初始化之前定义了一个函数。

function myCustomInitInstance(inst) {
    var body = tinymce.activeEditor.getContent();
    var find = "walks,train,late".split(',');
    find.forEach(function (v) {
        var re = new RegExp("("+v+")(?![</span>])","gumi"); 
        body = body.replace(re,`<span class="highlight">`+v+`</span>`);
    });
    tinymce.activeEditor.setContent(body);
}

这将在加载后从编辑器中获取内容，然后遍历查找数组中的所有单词并根据正则表达式方法替换它们。

这与一些 TinyMCE 自定义内容样式结合使用

content_style: '.highlight { color: orange; } ',

我现在有一个可行的解决方案..