如何在TinyMCE编辑器中实现带不同选项的多个下拉格式选择框

TinyMCE完全支持实现你需要的多组独立格式选择下拉框效果，核心可以通过自带的自定义格式体系+自定义工具栏按钮组合实现，具体配置方法如下：

核心实现逻辑 #

• 先在style_formats配置项中定义多组独立的格式规则，每组可以单独设置标题和对应的格式选项
• 通过setup方法注册多个自定义菜单按钮，每个按钮对应绑定一组预先定义好的格式集合
• 在工具栏配置中添加注册好的多个按钮，即可实现拆分后的多格式下拉框效果

可用配置示例 #

tinymce.init({
  selector: 'textarea#your-editor',
  // 定义所有格式分组
  style_formats: [
    { 
      title: '标题格式', 
      items: [
        { title: '一级标题', format: 'h1' },
        { title: '二级标题', format: 'h2' },
        { title: '三级标题', format: 'h3' },
        { title: '四级标题', format: 'h4' }
      ]
    },
    {
      title: '文本装饰',
      items: [
        { title: '加粗', inline: 'strong' },
        { title: '斜体', inline: 'em' },
        { title: '下划线', inline: 'u' },
        { title: '删除线', inline: 'del' },
        { title: '高亮', inline: 'mark' }
      ]
    },
    {
      title: '块级样式',
      items: [
        { title: '引用块', block: 'blockquote' },
        { title: '代码块', block: 'pre', classes: 'code-block' },
        { title: '提示卡片', block: 'div', classes: 'tip-card' },
        { title: '警告卡片', block: 'div', classes: 'warning-card' }
      ]
    }
  ],
  // 工具栏配置，添加三个独立下拉按钮
  toolbar: 'headingselect textdecorate blockstyle',
  // 注册自定义下拉按钮
  setup: function (editor) {
    // 标题格式下拉
    editor.ui.registry.addMenuButton('headingselect', {
      text: '标题格式',
      fetch: function (callback) {
        callback(editor.ui.registry.fetchStyleFormats('标题格式'));
      }
    });
    // 文本装饰下拉
    editor.ui.registry.addMenuButton('textdecorate', {
      text: '文本装饰',
      fetch: function (callback) {
        callback(editor.ui.registry.fetchStyleFormats('文本装饰'));
      }
    });
    // 块级样式下拉
    editor.ui.registry.addMenuButton('blockstyle', {
      text: '块级样式',
      fetch: function (callback) {
        callback(editor.ui.registry.fetchStyleFormats('块级样式'));
      }
    });
  },
  // 可选配置：隐藏默认的全局格式下拉里的其他分组
  style_formats_autohide: true
});

扩展说明 #

• 每个下拉的选项支持自定义行内标签、块级标签、附加类名、自定义样式等多种规则，可完全匹配你需要的格式需求
• 如果需要调整下拉框的显示图标、hover提示、选中状态等，可以在注册按钮时增加icon、tooltip等配置项实现个性化调整

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