ckeditor - 是否可以装饰在 ckeditor 中输入的部分文本？

Question

例如，我可以在编辑文本时用跨度为单词“红色”的所有实例着色吗？当然，我可以在保存数据时使用简单的正则表达式，但我有兴趣在输入文本时为文本着色。我还没有找到任何在用户键入时主动装饰文本的插件。

我仍在探索，与任何版本的 ckeditor 甚至 ckeditor 都无关。

Answer 1

我目前正在处理类似的问题，我也没有找到任何插件。我目前正在使用以下手动方法：我定义了一个CKEDITOR.style并使用它的 applyToRange() 方法。我通过CKEDITOR.dom.walker遍历整个文档来生成CKEDITOR.dom.range。

例如，您可以使用 walker 遍历文本。walker 返回每个“节点”，允许过滤所有 html。文本节点是第 3 类。在您的情况下，您可能必须抓住相邻文本节点的情况（我有点困惑如何定义文本节点的开始和结束）。如果您有要标记的文本的开始节点和结束节点，则可以从它们创建一个范围。使用方法 editor.createRange() 并手动设置开始和结束元素。不要忘记设置偏移量。

根据您的样式定义，会在范围周围生成一个 span 元素。范围已更新以引用此 span 元素。如果您不想再次删除样式，例如用户更改内容，这将非常有用。

此外，您需要一个策略来检查文本。看看onChange插件。关键相关事件也可能会有所帮助。

这就是我自己目前的距离。如果我遇到问题或找到更简单的解决方案，我会更新我的帖子。可悲的是，我无法分享代码本身。我还没有测试很多。我仍然希望我目前的进展对您有所帮助。