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

Question

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

我如何使用Jquery执行此操作？

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

Answer 1

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

但是，您可以让用户编辑纯文本元素，同时使其看起来像是在编辑突出显示的元素。使用样式指针 - 事件：无和透明背景在可编辑div上添加第二个div。只要两个元素具有相同的字体大小，您将编辑纯文本版本，但查看突出显示版本的颜色。

如果字体大小已修复，您可以更进一步使用textarea而不是可编辑的div。我使用这种方法在iPad上使用语法高亮编辑器，它不支持内联HTML编辑。