javascript - contentEditable 中的颜色编码？

Question

我一直试图分解所见即所得编辑器的工作方式，但在弄清楚它时遇到了问题（甚至不需要 5% 的多功能性）。

我自己的问题很简单。

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

“这是一个我们[可以忽略]之前的文本，但是任何符合 ref 的 [ref=xxxxxx|aaa|bnbb] 都必须用颜色编码。”

我想提到任何遵循[ref=<whatever>]稍微更小/有色的模式。

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

Answer 1

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

Answer 2

如果您将 keyup 事件侦听器添加到您的 contenteditable，您可以在那里执行您的正则表达式替换以在 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);
}

正则表达式可能并不完美，但如果不是，它应该可以帮助您入门。