javascript - 在 Jodit 所见即所得 HTML 编辑器中创建仅具有段落功能的额外按钮

Question

我正在开发一个小型 CMS 应用程序，我一直在使用 Jodit 编辑器 (v3) 作为所见即所得的 html 编辑器。这主要是因为我使用 EJS 在当前文本中呈现，而其他编辑器不想将该信息正确地呈现到其他所见即所得编辑器(CKEditor、TinyMCE、Quill)中。对于这个项目，已经通过 npm 和 grunt 安装和配置了 Jodit。

我在创建一个具有将当前所选内容格式化为段落的功能的额外按钮时遇到了问题。编辑器带有“段落”功能，但此下拉菜单包含标题和引用格式选项，我不希望用户(目前)拥有这些选项。此示例中的额外按钮还没有图标，但您仍然可以单击当前“段落”选项旁边的按钮。

Jodit 编辑器 (v3):https://xdsoft.net/jodit/doc/

Jodit 编辑器方法:https://xdsoft.net/jodit/doc/methods/

相关 HTML:(注意:我通常使用 EJS 在编辑器中呈现文本，但我相信这个示例信息就足够了)

<textarea name="value" class="form-control" id="html-editor"><h1>Testing</h1><p>Lorem ipsum ....</p></textarea>

相关JS:

var editor = new Jodit('#html-editor', {
      buttons: ['bold','italic', 'paragraph'],
      extraButtons: [{
        name: 'OnlyParagraph',
        icon: '',
        exec: (editor) => {
          var selection = editor.selection;
          var text = editor.selection.getHTML();
          console.log(text);
          var html = '<p>' + text + '</p>'
          console.log(html);
          editor.selection.remove();
          editor.selection.insertHTML(html);
        }
      }]
    });

本质上，我希望能够选择我的

元素并将其变成一个段落。如果使用额外的按钮不容易做到这一点，是否可以将“段落”按钮的默认下拉菜单调整为仅提供段落格式选项(此时不需要任何标题或引号选项)。

提前感谢您抽出时间提供帮助。

Answer 1

这是一个逃避，但使用这个 CSS:

.jodit_toolbar_btn-h1,
.jodit_toolbar_btn-h2,
.jodit_toolbar_btn-h3,
.jodit_toolbar_btn-h4,
.jodit_toolbar_btn-blockquote {
    display: none !important;
}

将隐藏段落下拉列表中除“正常”按钮以外的所有按钮。