Question

我一直试图分解WYSIWYG编辑器是如何工作的，但我遇到了问题（并且甚至不需要5％的多功能性）。

我自己的问题很简单。

在contentEditable div里面，我有一堆文字。我想对任何与简单模式匹配的文本进行颜色编码。所以我可能会有这样的文字：

“这是我们[可以忽略]这个早先的文本，但是任何适合ref的[ref = xxxxxx | aaa | bnbb]都需要进行颜色编码。”

我希望任何提及都遵循[ref=<whatever>]稍微变小/有色的模式。

关于如何做到这一点的任何想法？

Answer 1

一种方法是使用神话般的http://alexgorbatchev.com/SyntaxHighlighter/插件并为语法编写自定义画笔，这应该不会太难，因为您的语法着色要求相当简单。

Answer 2

如果您向contenteditable添加了一个keyup事件监听器，那么您可以在那里执行正则表达式替换，以便在contenteditable的innerHTML中添加$ 1。

这样做会重置插入位置，但您可以使用Rangy保留它。

function highlight(){
  var selection = rangy.saveSelection();
  contenteditable.innerHTML = contenteditable.innerHTML.replace(/(\[ref=[^\]]*\])([^<])/g, '<span class="ref">$1</span>$2');
  rangy.restoreSelection(selection);
}

正则表达式可能并不完美，但如果没有，它应该让你开始。

contentEditable中的颜色编码？

2 个答案: