如何在不新建Quill实例的情况下为PrimeNG p-editor添加自定义下拉选项

场景背景 #

在Angular项目中使用PrimeNG的p-editor组件构建富文本编辑器，默认工具栏运行正常，现有代码如下：

<div class="card">
    <p-editor [(ngModel)]="text" [style]="{ height: '320px' }">
        <ng-template #header>
            <span class="ql-formats">
                <button type="button" class="ql-bold" aria-label="Bold"></button>
                <button type="button" class="ql-italic" aria-label="Italic"></button>
                <button type="button" class="ql-underline" aria-label="Underline"></button>
            </span>
        </ng-template>
    </p-editor>
</div>

需添加自定义下拉菜单到工具栏，但由于p-editor内部管理Quill实例，无法手动新建实例避免冲突，以下是针对问题的解决方案：

1. 不手动新建Quill实例，添加自定义下拉菜单 #

核心思路是通过p-editor的onInit事件获取内部Quill实例，再结合模板自定义工具栏元素并绑定处理器：

步骤1：模板中添加自定义下拉菜单

修改header模板，加入自定义下拉元素（保持Quill工具栏的ql-formats类结构）：

<div class="card">
    <p-editor [(ngModel)]="text" [style]="{ height: '320px' }" (onInit)="onEditorInit($event)">
        <ng-template #header>
            <span class="ql-formats">
                <button type="button" class="ql-bold" aria-label="Bold"></button>
                <button type="button" class="ql-italic" aria-label="Italic"></button>
                <button type="button" class="ql-underline" aria-label="Underline"></button>
            </span>
            <!-- 自定义下拉菜单 -->
            <span class="ql-formats">
                <select class="ql-customDropdown" (change)="onCustomDropdownChange($event)">
                    <option value="">自定义选项</option>
                    <option value="option1">选项1</option>
                    <option value="option2">选项2</option>
                    <option value="option3">选项3</option>
                </select>
            </span>
        </ng-template>
    </p-editor>
</div>

步骤2：组件中获取Quill实例并实现处理器

在组件类中定义onEditorInit方法获取Quill实例，再实现下拉菜单的事件处理器：

import { Component } from '@angular/core';
import Quill from 'quill';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html'
})
export class EditorComponent {
  text: string;
  private quillInstance: Quill;

  onEditorInit(event: { quill: Quill }) {
    this.quillInstance = event.quill;
    // 可选：提前注册自定义格式或处理器
  }

  onCustomDropdownChange(event: Event) {
    if (!this.quillInstance) return;
    const selectElement = event.target as HTMLSelectElement;
    const value = selectElement.value;
    if (!value) return;

    // 执行自定义逻辑：例如插入指定内容或应用格式
    const range = this.quillInstance.getSelection();
    if (range) {
      this.quillInstance.insertText(range.index, `[${value}]`, 'user');
      this.quillInstance.setSelection(range.index + value.length + 2);
    }
    // 重置下拉选项
    selectElement.value = '';
  }
}

2. 是否需要放弃p-editor自行管理Quill？ #

不需要，除非你有深度定制Quill核心模块（如重写编辑器渲染逻辑）或大量复杂自定义需求（如完全自定义工具栏布局+多实例联动）的场景。

p-editor封装了Angular的双向绑定、生命周期集成等特性，直接放弃会增加代码复杂度和维护成本。通过onInit获取实例的方式，已经能覆盖绝大多数自定义工具栏、格式的需求。

3. 能否通过p-editor扩展自定义格式、处理器或下拉菜单？ #

完全可以，通过onInit拿到Quill实例后，即可使用Quill原生API完成所有扩展操作：

示例1：注册自定义格式

onEditorInit(event: { quill: Quill }) {
  this.quillInstance = event.quill;

  // 注册自定义格式
  const CustomFormat = Quill.import('formats/inline');
  class Highlight extends CustomFormat {
    static blotName = 'highlight';
    static tagName = 'span';
    static className = 'ql-highlight';
  }
  Quill.register(Highlight, true);

  // 为自定义格式添加工具栏处理器
  this.quillInstance.getModule('toolbar').addHandler('highlight', (value: boolean) => {
    if (value) {
      this.quillInstance.format('highlight', true);
    } else {
      this.quillInstance.format('highlight', false);
    }
  });
}

示例2：添加自定义工具栏按钮+处理器

在模板的header中添加按钮：

<span class="ql-formats">
  <button type="button" class="ql-highlight" aria-label="Highlight"></button>
</span>

然后在组件的onEditorInit中注册处理器（如上面代码所示），即可实现点击按钮应用自定义高亮格式。

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