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

Question

我正在尝试创建一个自定义的简单文本编辑器，以便可以在用户键入时为某些文本着色。因此，对于某些作品，我可能想要制作绿色，其他作品为蓝色。为此，我需要将我的内容绑定到 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 引用服务属性。

标签： htmlangulartypescriptinnerhtml