在夏季笔记编辑器中附加默认段落大小

如果你正在为你的夏季笔记编辑器开发一个小应用或插件，那么你可能会想要在其中添加一个功能，即用户可在编辑文本的时候设定默认段落大小。这篇文章将会提供你一个简单而有效的方法来实现这一目标。

安装并引用

要开始编写你的小应用和插件，你首先需要确保你在你的编辑器中有一个可用的 JavaScript API 。如果你还没有它，你可以从 这里 下载安装它，然后根据提示引用它。

<script src="path/to/your/summernote/api.js"></script>

添加默认段落大小的选项

在你的代码内，你将需要添加一个关于默认段落大小的下拉列表框。 这个下拉列表框将包含所有可能的段落大小选项，例如：

<div>
  <label for="default-paragraph-size">Default Paragraph Size:</label>
  <select id="default-paragraph-size">
    <option value="Normal" selected>Normal</option>
    <option value="Large">Large</option>
    <option value="Huge">Huge</option>
  </select>
</div>

在这个例子中，我们创建了一个标签和下拉列表框，其中“普通”选项被选中作为默认值。你可以添加其他的选项，或根据自己的需求对这个列表进行修改。

获取用户选择

一旦你展示了下拉列表框，你需要编写代码来捕获用户所作出的选择， 并在编辑器中更新默认段落大小。 为此，你可以添加以下代码：

var select = document.getElementById('default-paragraph-size');
var selected_paragraph_size = select.options[select.selectedIndex].value;

这将创建一个select元素，用于获取用户所选择的段落大小。使用这个选项， 你可以更新你编辑器中要显示的文本内容的段落大小。 例如：

$("#summernote").summernote({
  // ...
  // other configuration options
  // ...

  // Change normal font-size by clicking this button
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['Insert', ['picture', 'link']],
    ['Misc', ['undo', 'redo']],
    ['fontsize', ['summernoteFontsize']],
  ],
  fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '30'],
  // Add this option for your custom dropdown
  buttons: {
    summernoteFontsize: function() {
        return dropdownButton('dropdown-size', 'fa fa-header', selected_paragraph_size);
    }
  },
  // ...
  // your other code
  // ...
});

结论

如上所述，你可以使用下拉列表框、一些 JavaScript 代码和一些基本的CSS 来实现这个小应用程序或插件。 这样，当你用户想改变默认的段落大小时，他们就可以通过更直观的方式来做。