Summernote - 段落按钮未显示用于选择组件的下拉菜单

Posted 2023-03-22

【中文标题】Summernote - 段落按钮未显示用于选择组件的下拉菜单

【英文标题】：Summernote - Paragraph button is not showing the dropdown menu to select components

【发布时间】：2019-10-24 00:39:21

【问题描述】：

我正在使用 Summernote 富文本编辑器。 “段落”按钮不提供下拉菜单，因此我无法选择缩进和缩进功能。

请问我是缺少 cdn 还是有其他问题？

我的代码是：

html：

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

<div class="row">
    <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <label class="control-label control-label-left col-lg-12 col-md-12 col-sm-12 col-xs-12" for="atHome">At Home:</label>
        <textarea class="summernote" id="atHome" name="atHome" rows="3"></textarea>
    </div>  
</div> <!-- Row -->

JS：

$(document).ready(function() 
    $('#atHome').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']]
        ]
    );
);

【参考方案1】：

$(document).ready(function() 
$('#atHome').summernote(

  toolbar: [
      // [groupName, [list of button]]
      ['style', ['style']],
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['fontname', ['fontname']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']]
      ]
  );
);

使用上面的这个检查对我有用，如果您的代码不起作用，请检查控制台是否有错误。

【讨论】：

Rooky 错误：缺少 cdn -