在Jodit WYSIWYG HTML编辑器中创建只具有段落功能的额外按钮

Question

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

我在创建一个额外的按钮时遇到了困难，该按钮的功能是将当前选择的内容格式化为段落。编辑器附带了“段落”功能，但是这个下拉列表包括标题和引用格式选项，我不希望用户拥有这些选项(暂时)。本例中的额外按钮还没有图标，但您仍然可以单击当前“段落”选项旁边的按钮。

编辑(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;
}

将隐藏除了“正常”按钮的段落下拉。