我应该如何对 contenteditable div 进行双向绑定，以便我们可以在 onclick 事件发生时访问内容并进行更改？

Posted 2023-02-23

【中文标题】我应该如何对 contenteditable div 进行双向绑定，以便我们可以在 onclick 事件发生时访问内容并进行更改？

【英文标题】：How should I do two way binding for contenteditable div so that we can access the content and make changes when onclick event occurs?

【发布时间】：2021-02-14 21:04:30

【问题描述】：

包含 contenteditable div 和按钮的模板文件，其中文本应为粗体：

<button class="btn btn-light" (click)="onBoldClick()">
<b>B</b>
</button>
<div [(ngModel)]="content" name="fieldName" ngDefaultControl class="container editor">content
</div>

TypeScript 文件：

 export class EditorComponent implements OnInit 
    
    content:string="";
    
    constructor()  
    
    ngOnInit(): void 
    
    onBoldClick()
    console.log(this.content.bold());
    
 

【问题讨论】：

点击按钮想要达到什么效果或动作？

这是一个contenteditable div。我忘了在代码中提到它。我想要达到的效果是，就像在文本编辑器中我们点击一​​个粗体按钮，文本变成粗体一样的效果我想要实现。

【参考方案1】：

您可以在这里使用多种方法：

1- 您可以使用 ngClass 为特定的 div 元素添加点击样式：

<button class="btn btn-light" (click)="onBoldClick()"><b>B</b></button>
    <div [(ngModel)]="content" [ngClass]="[divStyle]"  name="fieldName" ngDefaultControl class="container editor" >content 
    </div>``

// ts文件

 divStyle: string;
    onBoldClick()
    this.divStyle = 'font-weight:bold;';
    

ref

2- 同样，您可以使用 viewChild 编辑 html 元素的样式： ref 更新 StackBlitz

【讨论】：

这是一个 contenteditable div 。我忘了在代码中提到它。我想要达到的效果是，就像在文本编辑器中一样，我们点击一​​个粗体按钮，文本变为粗体，这就是确切的事情我想做。

先生还有一件事如果我们必须再绑定一个属性并在不同的点击上同时应用这两个属性该怎么办？？

你在寻找这样的东西吗：stackblitz.com/edit/…

是的，先生是这样的，但是如果我使用下面给出的代码并想要与按钮产生的相同效果怎么办。这将如何使用 ngOnChanges 或其他东西来实现。 <select> <option value="bold">Bold<option> <option value="italic">Italic<option> </select>

为select标签添加change事件，所以每次用户改变选择事件都会触发并调用change方法，我会提供一个stackBlitz例子