Angular 4作为用户类型绑定到contenteditable div innerHTML

我正在尝试创建一个自定义的简单文本编辑器，这样我就可以根据用户的类型为某些文本着色。因此，对于一些作品，我可能想让绿色，其他蓝色。为此，我需要将我的内容绑定到div的innerHTML属性，该属性在最初显示我的内容时工作正常。（我可以在div中看到我的html呈现）

然后在输入事件中，我抓取当前的innerHTML，并希望用

搜索和包围某些字符串，使文本显示为绿色，然后我希望将更改呈现回div

onRuleEditorFullKeyUp（值：字符串）{ //用html标记搜索并环绕一些文本，然后设置一个变量 this.setBuiltRules=值； }

我遇到的问题是，一旦我设置了

setBuiltRules=value

，它似乎会重新绑定innerHTML，并且克拉的位置会转到最开始。因此，如果我正在键入某些内容，它会在每个字符后转到开头

有没有更好的方法来做到这一点，这样我就不会失去光标的位置

---

注意：setBuiltRules和getBuiltRules引用服务属性。

我回答了一个关于输入元素的问题，但我想您可以将其应用于您的问题