Question

我正在开发一个小型CMS应用程序，并且一直在使用Jodit编辑器（v3）作为WYSIWYG html编辑器。这主要是因为我正在使用EJS渲染当前文本，而其他编辑器不想将该信息正确渲染到其他WYSIWYG编辑器（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;
}

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

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

1 个答案: