Jquery突出显示可编辑div中的单词

Question

我有一个可编辑的 div，并想在用户仍在输入 div 时突出显示（应用 css 类）某些单词。

我将如何使用 Jquery 做到这一点？

我尝试使用 div.html().replace() 等，但它会替换它，然后将光标一直移动到开头。

Answer 1

直接更改可编辑 div 的 html 会导致问题 - 保存时，您将无法区分用户所做的更改和突出显示脚本所做的更改。

但是，您可以让用户编辑纯文本元素，同时使其看起来像是在编辑突出显示的元素。在可编辑的 div 上添加第二个 div，样式为 pointer-events: none 和透明背景。只要两个元素的字体大小相同，您将编辑纯文本版本，但会看到突出显示版本的颜色。

如果字体大小是固定的，您可以更进一步，使用 textarea 而不是可编辑的 div。我使用这种方法获得了一个在 iPad 上工作的语法高亮编辑器，它不支持内联 HTML 编辑。