Javascript中的动态语法高亮显示

我正在基于

contentEditable

html元素创建带有语法高亮的javascript编辑器。我编写了一个管理编辑器的类，其工作方式如下：

function Editor() {
    this.setContent = function(content) {
         var pos = //Computes cursor position in current dom scope (number of characters from begining)
         editor.innerHTML = content;
         /* Here I set the cursor back, again, it is complicated and slow process*/
    }
    this.highlight = function() {
         this.setContent(someHighlighter.highlight(this.getTextContent()));  //Slow - highlights whole innerText of editor DOM and sets it as innerHTML
    }
}

上面的代码只是一个概念。但即使如此，您也可以看到它并不有效，您可能会理解我正在寻找更好的替代方案。
另一方面，我不想用我的余生做这个编辑

是否有一些javascript语法高亮器可以与DOM而不是纯文本一起工作

有没有更好的方法可以在不丢失光标位置的情况下更改元素内容

---

你看过怎么做了吗？我在寻找代码概念，而不是要复制的实际代码。如果有，我只会使用其他编辑器，而不会制作自己的编辑器。事实证明，代码是查找代码概念的好地方。好吧，最后我决定使用CodeMirror。当你发布它时，我希望它是另一个“把这个放到你的页面上，然后闭嘴”的编辑器，但它显示了非常棒的Api。但是在看过代码后，我仍然不明白它是如何工作的。。。