Vue 富文本編輯器-----tinymce

 

首先使用方法  下載鏈接  下載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，沒問題了

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