使用自定义顺序和分组配置 Jodit 工具栏按钮的正确方法是什么？

Question

我想将 jodit 配置为按我选择的顺序和分组使用特定按钮。 例如： （撤消-重做-分隔符）组； （粗体 - 斜体 - 下划线 - 分隔符）组； ETC。 同时还可以选择混合自定义按钮。 我怎样才能做到这一点？

我尝试在 Jodit make 配置中使用“按钮”选项，这样可以轻松包含默认按钮，也可以包含自定义按钮，但不允许我进行分组。

buttons: [
  'undo',
  'redo',
  'italic',
  'bold',
  { name: 'foo', text: 'bar', exec: () => { ...}
]

我也尝试过使用这个方法：

editor.toolbar.build([
  new UIGroup(
    editor, 
    [editor.toolbar.buttons.find(b => b.name === 'undo')],
    { name: 'undo' }
  ),
  new UIGroup(
    editor, 
    [editor.toolbar.buttons.find(b => b.name === 'redo')],
    { name: 'redo' }
  ),
  new UIGroup(
    editor, 
    [new UISelect(
      editor, 
      {
        name: 'select-dropdown',
        options: [
          { value: 'a', text: 'a' }, 
          { value: 'b', text: 'b' }, 
          { value: 'c', text: 'c' }, 
        ]
      }
    )],
    { name: 'select-dropdown' }
  ),

通过使用 Jodit 提供的 UI 系统，这可以让我轻松使用默认按钮并通过使用 UISeparator 包含分隔符/分组，但 UIButton 没有“exec”属性，所以我不知道是否可以添加自定义功能。它也非常笨重，而且显然 UISelect 没有按预期工作：

这样做的正确方法是什么？ 提前非常感谢。

Answer 1

我发现有点不清楚您是否想要视觉分离或带有下拉菜单的实际分组。对于视觉分离，可以使用某种分隔符，例如 |按钮之间或 --- 用于分离：

  buttons: [
    'undo',
    'redo',
    '|',
    'italic',
    'bold',
    '---',
    { name: 'foo', text: 'bar', exec: () => {} },
  ],

也可以使用下拉菜单对按钮进行分组，或者如果您想将它们分组在一起，以便它们在较小的窗口中不会分离，可以使用“group:”。我将提供一个示例，您将按钮一起列出，但在控件中添加任何自定义功能：

const editor = Jodit.make('#editor', {
      buttons: [
        'fontsize',
        '|',
        {
          name: 'group1',
          text: 'Group 1',
          list: {
            undo: 'undo',
            redo: 'redo',
            customButton1: 'Custom 1',
          },
        },
        {
          name: 'group2',
          text: 'Group 2',
          id: '2',
          class: 'gr-2',
          list: {
            bold: 'bold',
            italic: 'italic',
            underline: 'underline',
            customButton2: 'Custom 2',
          },
        },
        '---',
        {
          group: 'group3',
          buttons: ['bold', 'italic', 'underline', 'customButton1']
        },
      ],
      controls: {
        customButton1: {
          text: 'Custom Button 1',
          exec: () => {
            editor.value = 'Hello';
          },
        },
        customButton2: {
          text: 'Custom Button 2',
          class: 'btn-2',
          exec: () => {
            editor.s.insertHTML('<p>Hello</p>');
          },
        },
      },
    });