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',
　　　　})
　　　}
　　}
}

 

設置前：

 

設置完成后效果：