时间戳

首页 > 解决方案 > Summernote 和自定义“魔术笔”（样式）工具

plugins - Summernote 和自定义“魔术笔”（样式）工具

问题描述

我在我的项目中使用summernote，我想自定义style带有“魔术笔”图标的按钮。在此按钮中，您可以设置 h1-h6 或引号、代码（前标记）...。

有我的summernote工具栏设置：

                    toolbar: [                           
                        ['style', ['style']],                          
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['view', ['fullscreen', 'codeview']],
                        ['help', ['help']]
                    ]

第一个style设置是“魔术笔”按钮（工具栏左起第一个），第二个style是粗斜体...按钮组（工具栏左起第二个）。

那么是否有可能style使用“魔术笔”图标自定义第一个按钮？

我需要从那里删除一些选项... h1、h5、引号、代码...

在互联网上，我找到了一些不起作用的解决方案：

StyleTags 选项（不是工具栏）：

                     styleTags: 
                         ['p', 'blockquote', 'pre']

或指定第一个“样式”：

                    toolbar: [                           
                        ['style', ['blockquote', 'pre']],

但如果没有成功，有人可以帮忙吗？

标签： pluginswysiwygsummernote

解决方案

不确定您是否对此进行了排序，但今天遇到了这个问题，Summernote 文档不是最好的，但这对我有用，并且将来可能会帮助其他人。

$(document).ready(function() {
  $('textarea[data-content~=summernote-content]').summernote({
    height: 400,
    toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'italic', 'underline', 'clear']],
          ['help', ['help']]
        ],
        styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5'],
  });
});

因此，您只需在工具栏标签中将样式定义为正常样式，然后在其下方指定您希望显示的实际属性。

推荐阅读