Angular 17中基于ngx-editor创建自定义下拉菜单并插入内容

需求说明 #

给ngx-editor工具栏添加名为「邮箱地址」的自定义下拉菜单，包含test1@mail.com、test2@yahoo.com、test3@gmail.com选项，选择选项后将对应邮箱文本插入编辑器主体内容中。

你当前的尝试代码 #

HTML代码

<div class="editor">
   <ngx-editor-menu [editor]="options" [toolbar]="toolbar"></ngx-editor-menu>
   <ngx-editor [editor]="options" formControlName="BODY"></ngx-editor>
</div>

TypeScript代码

import { Editor, TBItems, Toolbar, ToolbarCustomMenuItem, ToolbarDropdown, ToolbarDropdownGroupKeys, ToolbarItem, Validators } from 'ngx-editor';
import { FormBuilder, FormGroup } from '@angular/forms';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.scss']
})

export class TemplateComponent implements OnInit {
 public modalData:any;
 options: Editor = new Editor();
 toolbar: Toolbar = [];
 customDropdown: TBItems[];
 public pluginsToCreate:any[] = [];
 public formGroup: FormGroup;

 constructor(private fb: FormBuilder) { }

 ngOnInit(): void {
 this.formGroup = this.fb.group({ 
  BODY: [this.modalData.mailData.MESSAGE, Validators.required()]
 })
  const dropdownOptions: any= this.modalData.customer.map((option: any) => ({ value: option.DATA, label: option.TITLE }));
    if (dropdownOptions.length > 0) {
      this.customDropdown =  [dropdownOptions] ;
    }
    this.toolbar = [
      ['bold', 'italic'],
      ['underline', 'strike'],
      ['code', 'blockquote'],
      ['ordered_list', 'bullet_list'],
      [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
      ['link', 'image'],
      ['text_color', 'background_color'],
      ['align_left', 'align_center', 'align_right', 'align_justify'],
      ['horizontal_rule'],
      this.customDropdown
    ];
  }
}

问题分析 #

1. 自定义下拉菜单的结构不符合ngx-editor规范：需要使用ToolbarDropdown类型来定义下拉菜单的标题和选项集合，而非直接传入数组
2. 缺少选项选择后的文本插入逻辑：需要为每个下拉选项绑定回调函数，调用编辑器的insertText方法完成文本插入

正确实现代码 #

TypeScript代码

import { Editor, Toolbar, ToolbarDropdown, Validators } from 'ngx-editor';
import { FormBuilder, FormGroup } from '@angular/forms';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.scss']
})

export class TemplateComponent implements OnInit {
  public modalData: any;
  options: Editor = new Editor();
  toolbar: Toolbar = [];
  public formGroup: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.formGroup = this.fb.group({
      BODY: [this.modalData?.mailData?.MESSAGE || '', Validators.required()]
    });

    // 定义邮箱下拉选项，绑定插入文本的回调
    const emailDropdown: ToolbarDropdown = {
      label: '邮箱地址',
      items: [
        {
          label: 'test1@mail.com',
          command: () => {
            this.options.insertText('test1@mail.com');
          }
        },
        {
          label: 'test2@yahoo.com',
          command: () => {
            this.options.insertText('test2@yahoo.com');
          }
        },
        {
          label: 'test3@gmail.com',
          command: () => {
            this.options.insertText('test3@gmail.com');
          }
        }
      ]
    };

    // 组装完整工具栏
    this.toolbar = [
      ['bold', 'italic'],
      ['underline', 'strike'],
      ['code', 'blockquote'],
      ['ordered_list', 'bullet_list'],
      [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
      ['link', 'image'],
      ['text_color', 'background_color'],
      ['align_left', 'align_center', 'align_right', 'align_justify'],
      ['horizontal_rule'],
      emailDropdown // 加入自定义下拉菜单
    ];
  }
}

HTML代码（无需修改，保持原结构即可）

<div class="editor">
   <ngx-editor-menu [editor]="options" [toolbar]="toolbar"></ngx-editor-menu>
   <ngx-editor [editor]="options" formControlName="BODY"></ngx-editor>
</div>

关键说明 #

• 使用ToolbarDropdown类型定义下拉菜单，通过label设置下拉按钮显示文本，items数组定义每个选项的显示文本和点击回调
• 调用编辑器实例的insertText方法，将选中的邮箱文本插入到编辑器当前光标位置
• 若需从modalData.customer动态生成选项，可将items改为动态映射：

  items: this.modalData.customer.map((option: any) => ({
    label: option.TITLE,
    command: () => {
      this.options.insertText(option.DATA);
    }
  }))
  

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