tinymce富文本编辑器扩展插件-设置段落间距

项目中使用到tinymce富文本编辑器，由于官方并没有设置段落间距插件，所以自己开发了一个段落间距扩展插件, 和tinymce-vue配套使用。可以将其配置为toolbar，也可以配置成菜单项。

使用方法：

方式一：

1. 使用npm安装:

npm install tinymce-paragraphspacing

2. 使用import导入：

import 'tinymce-paragraphspacing'

3. 配置

3.1 toolbar设置方式

tinymce初始化配置：

init: {
  plugins: 'paragraphspacing',
  toolbar: 'uodo redo | paragraphspacing'
},

paragraphspacing插件有两个配置项：

1. paragraphspacing：设置段落间距值
2. paragraphspacing_options:设置插件相关配置项，比如图标颜色，线条宽度等

paragraphspacing

paragraphspacing默认的值为：'0px 3px 5px 10px 15px 20px 30px 50px'，如下图：

也可以自定义设置paragraphspacing的值：

init: {
  plugins: 'paragraphspacing',
  toolbar: 'uodo redo | paragraphspacing',
  // 自定义设置paragraphspacing的值
  paragraphspacing: '0px 20px 40px'
},

 效果如图：

paragraphspacing_options

paragraphspacing_options目前支持以下字段设置

{

        fillStyle: 字符串类型，定义填充的内部颜色，同css样式设置，比如'#ffffff',如果不设置，默认继承tinymce的设置

        strokeStyle: 字符串类型，定义线条轮廓颜色，同css样式设置，比如'#ffffff',如果不设置，默认继承tinymce的设置

        strokeWidth: 数字类型或者字符串(必须是可转换为数字的字符串)，定义线条轮廓宽度，比如20或'20', 如果不设置，默认继承tinymce的设置

}

设置如下：

init: {
  language_url: `/tinymce/langs/zh_CN.js`,
  language: 'zh_CN',
  skin_url: `/tinymce/skins/ui/oxide-dark`,
  convert_urls: false,
  height: "100%",
  width: "100%",
  plugins: 'paragraphspacing',
  toolbar: 'uodo redo | paragraphspacing',
  // 自定义设置paragraphspacing的值
  paragraphspacing: '0px 20px 40px',
  // 自定义设置paragraphspacing_options
  paragraphspacing_options: {
    fillStyle: '#880099',
    strokeStyle: '#993399',
    strokeWidth: 30
  },
  statusbar: true,
  branding: false, 
  resize: false,
  content_style: '* {margin: 0; padding: 0;}'
},

3.2 menu菜单设置方式

init: {
  plugins: 'paragraphspacing',
  toolbar: 'uodo redo | paragraphspacing',
  // 自定义menu
  menu: {
    format: {title: '格式', items: 'paragraphspacing'},
  },
  // 自定义设置paragraphspacing的值
  paragraphspacing: '0px 20px 40px'
},

 效果如图：

 方式二

1. 下载插件，新建一个plugins文件夹(默认在vue框架下)，将下载好的paragraphspacing插件文件放置在该文件夹下

 2. vue组件中导入插件：

import '@/plugins/tinymce/paragraphspacing/index.js'

3. 配置

同方式一

github: GitHub - yog-zhang/tinymce-plugins: tinymce pluginstinymce plugins. Contribute to yog-zhang/tinymce-plugins development by creating an account on GitHub.https://github.com/yog-zhang/tinymce-plugins.git