contenteditable div在编辑时会聚焦

Question

我是angular的新手，我有一个文本区域和一个内容可编辑的div。在文本区域内，HTML代码将在那里，div将呈现其预览，如果我们修改预览div中的任何内容，相同的内容将反映在文本区域中的HTML代码中。最初，在一次编辑(擦除或添加1个字符(后，div用于聚焦，后来我提出了一个解决方案，可以在那之后保持div 1秒的聚焦，它将聚焦，然后我尝试添加focus事件侦听器。这使div保持了焦点，但无论预览div中发生了什么修改，它都没有反映HTML代码。我需要div在编辑它时不要集中注意力，div中发生的任何修改都应该反映文本区域中的HTML。任何帮助都将不胜感激。非常感谢。

演示

content = 
`<h2>Hello</h2>
<p>This is a great example...</p>
`;
updateModel(event) {
console.log(event.target.innerHTML)
setTimeout(()=> {
this.content = event.target.innerHTML;
}, 1000)
}

<textarea 
[(ngModel)]="content"
cols="50" 
rows="10"></textarea>
<br><br><br>
<div [innerHtml]="content" contenteditable="true" (input)="updateModel($event)" #model>
</div>

Answer 1

Demo您的问题是两个元素的相同模型。您需要更改文本区域的模型。您可以为文本区域创建更多的模型。

contentToText=""
constructor(){this.contentToText=this.content;}

然后在你的功能分配给它

updateModel(event) {
this.contentToText = event.target.innerHTML;
}

在html 中

<textarea 
[(ngModel)]="contentToText"
cols="50" 
(input)="content=contentToText"
rows="10"></textarea>