Tinymce富文本自定义行距

项目中 toolbar 是抽离出来一个单独文件配置工具栏控件的，toolbar.js：

const toolbar = [
 'styleselect fontselect fontsizeselect formatselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript',
 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table emoticons forecolor backcolor  code codesample fullscreen'
]
export default toolbar

自定义行距，首先，在 toolbar中添加styleselect配置项：

加入之后，工具栏看到了格式配置项：

在初始化init方法中重写style，添加设置：

 style_formats: [
​     {
​      title: "Line Height",
​      items: [
​       { title: "1", block: "p", styles: { "line-height": "1.0" } },
​       { title: "1.5", block: "p", styles: { "line-height": "1.5" } },
​       { title: "1.75", block: "p", styles: { "line-height": "1.75" } },
​       { title: "2", block: "p", styles: { "line-height": "2" } },
​       { title: "3", block: "p", styles: { "line-height": "3" } },
​       { title: "4", block: "p", styles: { "line-height": "4" } },
​       { title: "5", block: "p", styles: { "line-height": "5" } }
​      ]
​     }
​    ],
​    style_formats_merge: false, // 此选项可以设置TinyMCE,是将style_formats设置中的样式附加到默认样式格式还是完全替换它们

​    style_formats_autohide: true, //（隐藏当前不可用的样式列表）

如下图：

例子：

设置了行距为2的效果：

style_formats_merge属性是可以设置TinyMCE，是将style_formats设置中的样式附加到默认样式格式还是完全替换它们。

设置为true，将设置的样式附加到默认样式，如下图：

设置为false，将设置的样式完全替换默认样式，如下图：