首先使用方法下載連結 下載tinymce檔案 解壓後放在components目錄下

頁面中使用 1）引入檔案 2）註冊元件 3）html中使用

import Tinymce from '@/components/Tinymce'

components: {
        Tinymce, // 富文字編輯器
    },

 <Tinymce ref="editor" v-model="content" :height="400" />

加完了之後，發現沒有調節字型和字型大小的地方

1、toolbar 增加自定義字型fontselect 和字型大小 fontsizeselect 這倆配置

找到toolbar.js檔案 在後面增加

// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample
 
', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen fontsizeselect fontselect']

export default toolbar

其實這時候，去頁面看，發現就有這倆選項了

但是可能字型大小和字型配置比較少，也沒用中文得選項，我們可以在index.vue中新增配置項，在initTinymce 中加上這兩句

fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 28pt 32pt 36pt 48pt
 
", // 第二步
font_formats:"微軟雅黑='微軟雅黑';宋體='宋體';黑體='黑體';仿宋='仿宋';楷體='楷體';隸書='隸書';幼圓='幼圓';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",
        

然後我們在重新整理頁面，ok，沒問題了

但只是我的方法，這個字型和字型大小可以通用，還是建議用官網下載的檔案哈，因為官網一直在更新，而我這個僅供大家參考！！！