vue中tinymce设置字体大小、字体选择

这里使用的是vue-element-admin框架

但是默认的tinymce富文本组件中 没有字体大小和字体选择

所以这里通过调整配置来增加字体大小和字体选择

在Timymce组件目录下，找到toolbar.js 可以看到里面的配置项

const toolbar = [
  ' undo redo  searchreplace  formatselect  styleselect ' +
    ' | toc bold italic underline  strikethrough forecolor backcolor fontsizeselect fontselect  ' +
  ' |  bullist numlist alignleft aligncenter alignright outdent indent  alignjustify  ltr rtl ' +
  ' | removeformat subscript superscript code codesample hr kityformula-editor' +
  ' | link image charmap  anchor  blockquote pagebreak insertdatetime media table emoticons' +
  ' preview fullscreen'
]

export default toolbar

选择合适的位置增加  fontsizeselect fontselect  两个配置就可以了。

注意看 toolbar参数是个数组，里面有两个键值，代表配置分了两行，如果需要增加一行，直接增加一个键值即可

如果需要自定义字体大小、字体，可以通过如下配置实现

在init时增加配置

 fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px', // 字体大小
 font_formats: 'PingFang SC;微软雅黑=\'微软雅黑\';宋体=\'宋体\';黑体=\'黑体\';仿宋=\'仿宋\';楷体=\'楷体\';隶书=\'隶书\';幼圆=\'幼圆\';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,;sans-serif', //  字体