VUE中tinymce设置字体大小、字体选择（就没有一篇文章能说的清楚的，那么我就说清楚这个问题）

 

这篇文章我们讲 tinymce富文本编辑器如何增加字体大小、字体选择

 

 tinymce编辑器：

 

第一步：

toolbar 增加自定义字体大小配置fontsizeselect及字体选择配置项fontselect

第二步：

tinymce.init 初始化增加配置：
2.1 字体大小选择具体项目：fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
2.2 特别说明：有人会问那么 上面字体选择已经配置选项fontselect 那么这里要不要也增加字体选择，可以确定的是这里不需要增加任何配置即可生效

代码示例：

export default {
  　name: 'tinymce',
　　props: {
  　　id: {
    　　type: String
  　　},
  　　value: {
    　　type: String,
    　　default: ''
  　　},
  　　toolbar: {
    　　type: Array,
    　　required: false,
    　　default() {
      　　// return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p media link | alignleft aligncenter alignright'] // 修改前
      　　return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright | fontsizeselect | fontselect'] // 修改后 第一步
 　　} 18   　　},
　　},
　　mounted() {
  　　this.initTinymce()
　　},
　　methods: {
  　　initTinymce() {
　　　　window.tinymce.init({
　　　　　　toolbar: this.toolbar,
　　　　　　menubar: this.menubar,
　　　　　　plugins: 'advlist,autolink,code,paste,textcolor,colorpicker,fullscreen,link,lists,media,wordcount,imagetools',
　　　　　　fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // 第二步
　　　　　　end_container_on_empty_block: true,
　　　　　　powerpaste_word_import: 'clean',
　　　　　　code_dialog_height: 450,
　　　　　　code_dialog_width: 1000,
　　　　　　advlist_bullet_styles: 'square',
　　　　　　advlist_number_styles: 'default',
　　　　})
　　　}
　　}
}

 

设置前：

 

设置完成后效果：