Angular 4中如何向Froala编辑器添加文本且不移除编辑器？

我明白你遇到的问题了——直接操作原生元素的innerHTML确实会把Froala编辑器搞坏，因为它会覆盖编辑器生成的整个DOM结构，导致编辑器实例被销毁。下面给你几种在Angular 4/TypeScript里正确实现内容添加的方法：

方法1：利用双向绑定的froalaModel（最简洁） #

因为你已经用了[(froalaModel)]="editorContent"的双向绑定，直接修改这个变量就能同步到编辑器，完全不需要操作DOM或者编辑器实例：

// 定义要追加的内容
toAppend: string = '<p>Hi there!</p>';

// 追加文本的方法
appendToEditor() {
  // 直接拼接内容到双向绑定的变量
  this.editorContent += this.toAppend;
}

这种方式最符合Angular的开发理念，简单直接，Froala会自动处理内容同步和编辑器渲染。

方法2：通过编辑器API操作（更灵活） #

如果你需要更精细的控制（比如插入到光标位置、替换部分内容等），可以使用Froala官方文档里提到的html.set方法，但要先正确获取编辑器实例：

步骤1：获取编辑器实例 #

你有两种方式获取实例：

方式A：通过froalaInit事件

修改模板，添加初始化事件：

<div id="notesDiv" #divvy [froalaEditor]="options" [(froalaModel)]="editorContent" (froalaInit)="onEditorReady($event)"> </div>

在TypeScript里保存实例：

private froalaInstance: any;

// 编辑器初始化完成时保存实例
onEditorReady(editor: any) {
  this.froalaInstance = editor;
}

方式B：通过ViewChild获取指令实例

直接导入并获取Froala指令的实例：

import { FroalaEditorDirective } from 'angular-froala-wysiwyg';
import { ViewChild } from '@angular/core';

// ...

@ViewChild(FroalaEditorDirective) froalaDirective: FroalaEditorDirective;

步骤2：调用API追加内容 #

不管用哪种方式获取实例，都可以用html.get()先拿到当前内容，再拼接后用html.set()设置回去：

appendToEditor() {
  const toAppend = '<p>Hi there!</p>';
  
  // 方式A：用保存的实例操作
  if (this.froalaInstance) {
    const currentContent = this.froalaInstance.html.get();
    this.froalaInstance.html.set(currentContent + toAppend);
  }

  // 方式B：用指令实例操作
  if (this.froalaDirective?.editorInstance) {
    const currentContent = this.froalaDirective.editorInstance.html.get();
    this.froalaDirective.editorInstance.html.set(currentContent + toAppend);
  }
}

为什么之前的方法不行？ #

你之前直接修改divvy.nativeElement.innerHTML，相当于把Froala编辑器生成的所有包装DOM、工具栏、编辑区域都给替换了，编辑器的实例自然就被销毁了，所以才会出现“编辑器被完全移除”的情况。Froala是封装好的富文本编辑器，必须通过它提供的API或者双向绑定来操作内容，不能直接篡改原生DOM。

内容的提问来源于stack exchange，提问作者cosmo