如何在Quill编辑器中嵌入带Angular双向绑定的HTML字段？

我来帮你解决这个问题！Quill默认会过滤掉它不识别的HTML元素（比如带ngModel的输入框），而且直接把Angular指令写在HTML字符串里也不会被框架编译，所以得分两步走：先让Quill显示输入框，再实现双向绑定。

第一步：让Quill允许显示<input>标签 #

Quill有内置的内容过滤机制，你需要配置它的Clipboard模块，把<input>加入白名单，同时调整内容 sanitize 规则：

在你的Angular组件初始化Quill时，这样配置：

import Quill from 'quill';

// 初始化Quill实例
this.quill = new Quill('#editor-container', {
  modules: {
    clipboard: {
      // 自定义匹配规则，保留input标签
      matchers: [
        ['input', node => true]
      ],
      // 关闭默认的sanitize，或者自定义安全校验逻辑
      sanitize: false
    },
    // 其他模块配置（比如工具栏）
    toolbar: ['bold', 'italic', 'underline']
  },
  theme: 'snow'
});

另外，如果你用[(ngModel)]绑定Quill的内容，还要通过Angular的DomSanitizer把HTML标记为安全内容，避免被框架过滤：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

// 将HTML字符串转为安全格式
this.myModelVar: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(
  "Here is a text box <input type='number' name='myvalue' value='5'>"
);

第二步：实现Angular双向绑定 #

直接在Quill的HTML里写[(ngModel)]是无效的，因为这段动态HTML没有被Angular编译。我们可以手动实现双向同步：

方案1：手动监听事件 + 模型同步 #

适合简单场景，直接操作DOM元素同步数据：

import { BehaviorSubject, Subscription } from 'rxjs';

// 用BehaviorSubject管理模型值，方便订阅更新
myValue$ = new BehaviorSubject<number>(5);
private inputSubscription?: Subscription;

ngAfterViewInit() {
  // 延迟执行确保Quill渲染完成
  setTimeout(() => {
    const inputElement = this.quill.root.querySelector('input[name="myvalue"]') as HTMLInputElement;
    if (!inputElement) return;

    // 初始值同步
    inputElement.value = this.myValue$.value.toString();

    // 监听输入框变化，更新组件模型
    inputElement.addEventListener('input', () => {
      const newValue = parseInt(inputElement.value, 10);
      if (!isNaN(newValue)) {
        this.myValue$.next(newValue);
      }
    });

    // 监听模型变化，更新输入框值
    this.inputSubscription = this.myValue$.subscribe(newValue => {
      if (inputElement.value !== newValue.toString()) {
        inputElement.value = newValue.toString();
      }
    });
  }, 0);
}

ngOnDestroy() {
  // 组件销毁时取消订阅，避免内存泄漏
  this.inputSubscription?.unsubscribe();
}

方案2：自定义Quill格式（长期优雅方案） #

如果需要频繁嵌入输入框，推荐自定义Quill格式，更便于管理：

1. 注册自定义Blot：

import Quill from 'quill';

const InlineInput = Quill.import('blots/inline');

class NumberInputBlot extends InlineInput {
  static blotName = 'numberInput';
  static tagName = 'INPUT';
  static className = 'quill-number-input';

  static create(value: { value: number, name: string }) {
    const node = super.create(value) as HTMLInputElement;
    node.type = 'number';
    node.name = value.name;
    node.value = value.value.toString();
    return node;
  }

  static value(node: HTMLInputElement) {
    return {
      value: parseInt(node.value, 10),
      name: node.name
    };
  }
}

Quill.register(NumberInputBlot);

2. 在组件中插入自定义格式并同步数据：

// 插入输入框到Quill编辑器
this.quill.insertEmbed(this.quill.getLength() - 1, 'numberInput', {
  value: this.myValue$.value,
  name: 'myvalue'
});

// 后续的事件监听和模型同步逻辑和方案1一致

注意事项 #

• 关闭sanitize后要注意XSS风险，如果内容来自用户输入，务必自行做安全校验。
• 如果Quill内容是动态加载的，要在内容更新后重新执行绑定逻辑。
• 组件销毁时一定要取消订阅，避免内存泄漏。

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