tinymce vue富文本编辑器 行高、字间距、字体设置

tinymce 七牛云上传图片

在tinymce.init()方法中初始化对象的”images_upload_handler“属性中，进行上传操作：

 // 七牛上传
        images_upload_handler(blobInfo, success, failure, progress) {
          const file = blobInfo.blob();
          if (file.size > 5242880) {
            failure("图片请不可大于 5MB");
            return;
          }
          progress(0);
          getFileToken(_this.filePurpose)
            .then((response) => {
              let headers = { Authorization: "bearer " + response.token };
              let formData = new FormData();
              formData.append("file", file);
              upLoad(_this.filePurpose, formData, headers).then((res) => {
                success(readUploadFileUrl + res);
                progress(100);
              });
            })
            .catch((err) => {
              failure("出现未知问题，刷新页面，或者联系程序员");
              console.log(err);
            });
        },

tinymce 新增字号、字间距、字体、行高

同样需要在tinymce.init()方法中初始化对象

1.toolsbar.js 中新增字号、字体、样式属性（行高设置）

2.tinymce 字号初始化设置

3.tinymce 行高、字体初始化设置

4.tinymce 字间距
a.引入

 import PluginManagerLetterspacing from "./js/latterspacing";

b.初始化行间距插件

c.toolbar.js中新增letterspacingselect字段
plugins数组中加入letterspacing
d.tinymce.init中加入letterspacing_formats: ‘0 0.5pt 1pt 1.5pt 2pt 3pt’

init({
        readonly: this.isCheck, // 是否只读
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, 
        plugins: plugins,
        fontsize_formats: "12px 14px 16px 18px 20px 24px", // 字号
        letterspacing_formats: "0 0.5pt 1pt 1.5pt 2pt 3pt 5pt 10pt 15pt 20pt 30pt", // 字间距
        font_formats: fontFamily, //字体
        style_formats: [
          {
            title: "行高",
            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, //是否将style_formats设置中的样式附加到默认样式格式还是完全替换它们。true为附加
        style_formats_autohide: true, //隐藏当前不可用的样式列表
      });

// fontFamily,js
// 字体
const fontFamily = "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings"

export default fontFamily

// toolbar,js
const toolbar = [
  'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent undo redo removeformat subscript superscript code | letterspacingselect',
  'fontsizeselect | fontselect | styleselect | hr bullist numlist image charmap preview insertdatetime emoticons forecolor backcolor fullscreen'
]

export default toolbar

// plugins,js
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount letterspacing']

export default plugins

// letterspacing,js
function PluginManagerLetterspacing() {
  let tinymce = window.tinymce;
  tinymce.PluginManager.add('letterspacing', function (editor, url, $) {
    editor.on('init', function () {
      editor.formatter.register({
        letterspacing: {
          inline: 'span',
          styles: {
            'letter-spacing': '%value'
          }
        }
      })
    })

    editor.addButton('letterspacingselect', function () {
      var items = [],
        defaultLetterSpacingFormats = '0 0.5pt 1pt 1.5pt 2pt 3pt'
      var letterspacing_formats = editor.settings.letterspacing_formats || defaultLetterSpacingFormats
      letterspacing_formats.split(' ').forEach(function (item) {
        var text = item,
          value = item
        // Allow text=value for line-height formats
        var values = item.split('=')
        if (values.length > 1) {
          text = values[0]
          value = values[1]
        }
        items.push({
          text: text,
          value: value
        })
      })
      return {
        type: 'listbox',
        text: '字间距',
        tooltip: '字间距',
        values: items,
        fixedWidth: true,
        onPostRender: function () {
          var self = this
          editor.on('nodeChange', function (e) {
            var formatName = 'letterspacing'
            var formatter = editor.formatter
            var value = null
            e.parents.forEach(function (node) {
              items.forEach(function (item) {
                if (formatName) {
                  if (formatter.matchNode(node, formatName, {
                      value: item.value
                    })) {
                    value = item.value
                  }
                } else {
                  if (formatter.matchNode(node, item.value)) {
                    value = item.value
                  }
                }
                if (value) {
                  return false
                }
              })
              if (value) {
                return false
              }
            })
            self.value(value)
          })
        },
        onselect: function (e) {
          tinymce.activeEditor.formatter.apply('letterspacing', {
            value: this.value()
          })
        }
      }
    })
  })

  tinymce.PluginManager.requireLangPack('letterspacing', 'de')
}
export default PluginManagerLetterspacing