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

【问题标题】：Creating Extra Button with only Paragraph Functionality in Jodit WYSIWYG HTML Editor在 Jodit 所见即所得 HTML 编辑器中创建仅具有段落功能的额外按钮
【发布时间】：2018-10-02 13:33:38
【问题描述】：

我正在开发一个小型 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);
        }
      }]
    });

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

元素并将其转换为段落。这是否不容易通过额外的按钮来实现，“段落”按钮的默认下拉菜单是否可以调整为仅提供段落格式选项（此时不需要任何标题或引用选项）。

提前感谢您的时间和帮助。

【问题讨论】：

标签： javascript html content-management-system wysiwyg

【解决方案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;
}

将隐藏段落下拉菜单的“普通”按钮以外的所有按钮。

【讨论】：