ngx-quill独立容器自定义工具栏默认功能失效问题求助

问题出在Quill初始化时未正确关联工具栏DOM元素，试试下面的配置方式：

步骤1：给工具栏添加模板引用变量 #

修改模板代码，用模板引用变量替代ID选择器，避免DOM渲染时机问题：

<div #toolbar class="ql-toolbar">
    <button class="ql-bold">Bold</button>
</div>

<quill-editor 
[(ngModel)]="test" 
[readOnly]="false" 
[format]="'object'" 
[modules]="editorModules"
></quill-editor>

步骤2：在组件类中绑定工具栏并配置模块 #

通过ViewChild获取工具栏原生元素，确保Quill初始化时能准确关联：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  test: any;
  @ViewChild('toolbar') toolbar!: ElementRef;
  editorModules: any;

  ngOnInit(): void {
    // 视图初始化完成后，将工具栏元素传入Quill模块配置
    this.editorModules = {
      toolbar: this.toolbar.nativeElement
    };
  }
}

原理说明 #

直接用'#toolbar'字符串作为配置时，可能因Angular DOM渲染顺序导致Quill初始化时找不到目标元素，无法绑定按钮点击事件。改用ViewChild获取原生元素后传入配置，能确保Quill正确关联工具栏，按钮即可触发内置的粗体功能，同时ctrl+b的高亮双向绑定也能正常工作。

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