jquery突出可編輯div中的單詞

Question

我有一個可編輯的div，並希望突出顯示（應用css類）某些單詞當用戶仍然在div中輸入時。

我該如何使用Jquery來做這件事？

我嘗試使用div.html().replace()等，但它取代它，然後將光標一直移回到開頭。

Answer 1

直接更改可編輯div的html會導致問題 - 保存時，您將無法區分用戶所做的更改與突出顯示腳本所做的更改。

但是，您可以讓用戶編輯純文本元素，同時使其看起來像他們正在編輯突出顯示的元素。在樣式pointer-events：none和透明背景的可編輯div上添加第二個div。只要兩個元素具有相同的字體大小，您將編輯純文本版本，但會看到突出顯示版本的顏色。

如果字體大小是固定的，您可以更進一步，使用textarea而不是可編輯的div。我使用這種方法來獲得在iPad上工作的語法高亮編輯器，該編輯器不支持內聯HTML編輯。