我正在尝试创建一个自定义的简单文本编辑器，以便可以在用户键入时为某些文本着色。因此，对于某些作品，我可能希望使绿色，而另一些则为蓝色。为此，我需要将我的内容绑定到div的innerHTML属性，该属性可以很好地初始显示我的内容。 （我可以在div中看到我的html渲染）。
<div class="textarea-editor" contenteditable="true" [innerHTML]="getBuiltRules" (input)="onRuleEditorFullKeyUp($event.target.innerHTML)"></div>
然后在输入事件中，我正在获取当前的innerHTML，并想用<span class='color-green'></span>搜索并包围某些字符串，以便此文本显示为绿色，然后我希望将更改呈现回div。
onRuleEditorFullKeyUp(value: string) {
// search and surround some text with html tags then set a variable
this.setBuiltRules = value;
}
我遇到的问题是，一旦我设置了setBuiltRules = value，似乎就重新绑定了innerHTML，克拉的位置就从一开始。因此，如果我要键入内容，它将转到每个字符之后的开头。
有没有更好的方法可以做到这一点，这样我就不会失去光标位置？
注意：setBuiltRules和getBuiltRules引用服务属性。