contenteditable div 在编辑它时正在集中注意力

Question

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

DEMO

  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>

contenteditable div 在编辑它时正在集中注意力

contenteditable div is focusing out while editing it

textarea

angular

angular-forms