summernote 样式标签和工具栏

Posted 2023-03-22

【中文标题】summernote 样式标签和工具栏

【英文标题】：summernote styleTags along with toolbar

【发布时间】：2018-08-09 13:19:45

【问题描述】：

Summernote 为自定义工具栏提供选项，例如

$('#summernote').summernote(
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
);

& 用于设置 h1、h2 等

$(".summernote").summernote(
    styleTags: ['h1', 'h2']
);

但是如何在单一方法中使用两者？

$('#summernote').summernote(
  styleTags: ['h1', 'h2'],
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
);

我尝试了多种变体，但不起作用

【参考方案1】：

您应该将“样式”按钮添加到您的 btns 组。

试试下面的代码。

$('#summernote').summernote(
    toolbar: [
         ['style', ['bold', 'italic', 'underline']],
         ['para', ['ul', 'ol', 'paragraph', 'style']],
    ],
    styleTags: ['p', 'h4'],
);

【讨论】：

在“但是如何在单一方法中使用两者”之后，您所建议和使用的内容有什么区别

不同之处在于我的工具栏[1] 在数组中具有“样式”。这就像 styleTags 下拉列表的某种占位符。