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

Posted 2023-05-07

【中文标题】contenteditable div 在编辑时正在集中注意力

【英文标题】：contenteditable div is focusing out while editing it

【发布时间】：2020-11-07 21:32:20

【问题描述】：

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

【问题讨论】：

使用模糊，它按预期工作

【参考方案1】：

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

  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>