Vue中tinymce4.7.5設定字型大小和字型樣式

1.第一步：

在toolbar中添加 fontsizeselect （字型大小）和 fontselect （字型樣式）

2第二步：

我引用的是tinymce4.7.5 元件 Editor

在初始化editorInit中添加 以下 ，

代表字型小大格式範圍 fontsize_formats: “8pt 10pt 12pt 14pt 18pt 24pt 36pt”,

代碼示例

import Editor from '@tinymce/tinymce-vue'


      editorInit: {
        language_url: './static/tinymce4.7.5/zh_CN.js',
        language: 'zh_CN',
        convert_urls: false,
        plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample fontsizeselect fontselect', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData).then(res => {
            success(res.data.data.url)
          }).catch(() => {
            failure('上傳失敗，請重新上傳')
          })
        }
      },
           

效果

補充：

字型樣式想中添加中文字型

找到tinymce.min.js檔案

ctrl + F 搜尋 Andale Mono=andale mono

在前面添加如下，總共有兩處地方需要添加，然後重新整理頁面即可看到效果

"宋體=宋體;黑體=黑體;仿宋_GB2312=仿宋_GB2312;楷體_GB2312=楷體_GB2312;隸書=隸書;幼圓=幼圓;微軟雅黑=microsoft yahei;
           

tinymce 預設是英文界面，是以還需要下載下傳一個中文語言包（國内可能需要翻牆）

語言包放置在

在初始化editorInit中添加 以下

language_url: '/static/tinymce4.7.5/zh_CN.js',
           

示例

效果如下