Summernote 样式不起作用

Question

我做了一个小提琴来暴露我在桌面上遇到的同样的问题。

在 Summernote 编辑器中，应用字体大小和字体系列是可行的，但我无法将字体设置为粗体、斜体、删除线、上标...

我的小提琴：http://jsfiddle.net/djibe89/by9n8azm/

感谢您的帮助

$('#my-summernote').summernote({
  minHeight: 200,
  placeholder: 'Write here ...',
  focus: false,
  airMode: false,
  fontNames: ['Roboto', 'Calibri', 'Times New Roman', 'Arial'],
  fontNamesIgnoreCheck: ['Roboto', 'Calibri'],
  dialogsInBody: true,
  dialogsFade: true,
  disableDragAndDrop: false,
  toolbar: [
    // [groupName, [list of button]]
    ['para', ['style', 'ul', 'ol', 'paragraph']],
    ['fontsize', ['fontsize']],
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['height', ['height']],
    ['misc', ['undo', 'redo', 'print', 'help', 'fullscreen']]
  ],
  popover: {
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']]
    ]
  },
  print: {
    //'stylesheetUrl': 'url_of_stylesheet_for_printing'
  }
});

如果我重置代码并使用官方演示中的代码，也会发生同样的情况

Answer 1

刚刚根据文档添加了以下文件（https://summernote.org/getting-started/#for-bootstrap-4）。请检查。

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>

http://jsfiddle.net/by9n8azm/106/

Answer 2

Bootstrap 3.4.1 在 Summernote 上工作顺利，但从 Bootstrap 版本 4 到 5 就无法工作，因此他们创建了 Summernote Lite，您可以点击以下链接： https://summernote.org/getting-started/#for-bootstrap-4

注意：Summernote Lite 不依赖于任何 Jquery 和 bootstrap 版本

但是在精简版中，某些设计不起作用，因此您需要覆盖样式代码，例如粗体文本不显示粗体，因为它的样式是“font-weight：bolder;”如果您覆盖样式，那么您可以看到粗体文本。

b, strong {
  font-weight: bold;
}