Summernote富文本编辑器段落按钮无下拉菜单，无法使用缩进功能求助

Hey there! Let's troubleshoot why your Summernote Paragraph button isn't showing its dropdown menu, and why you can't access the indent/outdent features.

First off, your Summernote CDN links are totally correct—you're using the right 0.8.10 summernote-bs4 files, so missing resources aren't the main problem here. But there are two key fixes you need to apply:

1. Add the required dependencies for Summernote BS4 #

Summernote's Bootstrap 4 version relies on jQuery and Bootstrap 4's JavaScript to handle interactive elements like dropdown menus. Your current code doesn't include these, which is likely why the Paragraph dropdown isn't working at all.

Update your HTML to include these dependencies before the Summernote JS file:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap 4 JS (includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Summernote Styles and Script -->
<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>

2. Adjust your toolbar config to include indent/outdent #

In Summernote 0.8.10, the default paragraph button's dropdown only includes text alignment options (left/center/right/justify). The indent and outdent tools are separate buttons that need to be explicitly added to your toolbar if you want to use them.

Modify your JavaScript code to add indent and outdent to the para toolbar group:

$(document).ready(function() {
  $('#atHome').summernote({
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph', 'indent', 'outdent']], // Added indent/outdent here
      ['height', ['height']]
    ]
  });
});

After making these two changes, the Paragraph dropdown should load properly (showing alignment options), and you'll have dedicated buttons for indent and outdent in your toolbar.

内容的提问来源于stack exchange，提问作者Glyn