TINYMCE如何通过工具栏实现选中段落的间距调整功能

可行方案主要有以下几种： #

1. 用官方自带的行高调整控件（针对行内间距）

TinyMCE自带lineheight插件，直接配置即可在工具栏增加行高选择下拉框，选中对应段落后选择数值即可单独调整该段落的行高，配置示例如下：

tinymce.init({
  plugins: 'lineheight',
  toolbar: 'lineheight',
  // 可选自定义行高可选值，单位支持px/em/rem/%等
  lineheight_formats: '1 1.2 1.5 1.8 2 3',
});

注：该配置仅调整行高，不涉及段前、段后的间距

2. 自定义格式预置（针对段前段后间距，最简单的自定义方案）

如果需要调整段前/段后间距，可以通过style_formats配置项提前预设好不同的段间距样式，用户选中段落后直接在格式下拉菜单选择对应样式即可生效，配置示例：

tinymce.init({
  style_formats: [
    { title: '段前间距0', selector: 'p', styles: { 'margin-top': '0' } },
    { title: '段前间距10px', selector: 'p', styles: { 'margin-top': '10px' } },
    { title: '段前间距20px', selector: 'p', styles: { 'margin-top': '20px' } },
    { title: '段后间距0', selector: 'p', styles: { 'margin-bottom': '0' } },
    { title: '段后间距10px', selector: 'p', styles: { 'margin-bottom': '10px' } },
    { title: '段后间距20px', selector: 'p', styles: { 'margin-bottom': '20px' } },
  ],
  // 把格式选择器加到工具栏
  toolbar: 'styles',
});

3. 自定义工具栏按钮（支持自由输入间距值）

如果需要让用户可以自由输入任意间距值，可以自己开发自定义工具栏按钮，调用TinyMCE的API给选中的段落设置对应样式，示例代码如下：

tinymce.init({
  toolbar: 'customParagraphMargin',
  setup: function (editor) {
    // 自定义调整段后距的按钮
    editor.ui.registry.addButton('customParagraphMargin', {
      text: '段间距',
      onAction: function () {
        const margin = prompt('请输入段后间距值（例如10px）：');
        if (margin) {
          // 给选中的段落设置样式
          editor.formatter.apply('formatBlock', { block: 'p', styles: { 'margin-bottom': margin } });
        }
      }
    });
  }
});

内容的提问来源于stack exchange，提问作者i.c