一、自定義工具欄把toolbar在vue的data return里配置就可以；

二、用vue-quill-editor寫出來的郵件，發出去之后字體樣式變了，那是應該vue-quill-editor改變字體的font-family沒綁定在style上，而是通過class來改變的，這個class只有vue-quill-editor插件才有，接收郵件端是沒有的，故沒辦法把想要的字體顯示出來，只有把font-family綁定到style才有效。

效果圖：如下：

以下是方法步驟：

1、vue項目安裝vue-quill-editor：

npm install vue-quill-editor --save

2、vue項目的main.js方法中引入vue-quill-editor：

import VueQuillEditor from 'vue-quill-editor' //vue-quill-editor其它文件可在應用頁面直接引入Vue.use(VueQuillEditor)

3、應用頁面引入并生成富文本域：

{{ msg }}

v-model="content":options="editorOption"@change="onEditorChange($event)"

>

//引入相關文件

import { quillEditor,Quill } from"vue-quill-editor";

import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'

//設置字體大小

let fontSizeStyle=Quill.import('attributors/style/size') //引入這個后會把樣式寫在style上

fontSizeStyle.whitelist=['45px','60px','90px']

Quill.register(fontSizeStyle,true)//設置字體樣式

let Font = Quill.import('attributors/style/font') //引入這個后會把樣式寫在style上

let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']

Font.whitelist= fonts //將字體加入到白名單

Quill.register(Font, true)

exportdefault{

name:'HelloWorld',

data () {return{

msg:'vue-quill-editor demo',

content:'',

editorOption: {//配置工具欄

modules: {

toolbar: [

['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下劃線，刪除線

['blockquote', 'code-block'], //引用，代碼塊

[{ 'header': 1 }, { 'header': 2 }], //幾級標題

[{ 'list': 'ordered'}, { 'list': 'bullet' }], //有序列表，無序列表

[{ 'script': 'sub'}, { 'script': 'super' }], //下角標，上角標

[{ 'indent': '-1'}, { 'indent': '+1' }], //縮進

[{ 'direction': 'rtl' }], //文字輸入方向

[{ 'size': ['45px','60px','90px'] }], //字體大小

[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//標題

[{ 'color': [] }, { 'background': [] }], //顏色選擇

[{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],//字體

[{ 'align': [] }], //居中

['clean'] //清除樣式

]

}//背景顏色 - background

//加粗- bold

//顏色 - color

//字體 - font

//內聯代碼 - code

//斜體 - italic

//鏈接 - link

//大小 - size

//刪除線 - strike

//上標/下標 - script

//下劃線 - underline

//引用- blockquote

//標題 - header

//縮進 - indent

//列表 - list

//文本對齊 - align

//文本方向 - direction

//代碼塊 - code-block

//公式 - formula

//圖片 - image

//視頻 - video

//清除字體樣式- clean

}

}

},

created() {

},

mounted() {

},

methods: {

onEditorChange() {

}

}

}

min-height: 300px;

}

/*這里一定要寫上，是用來把相關改變的配置在工具欄正常顯示

如果不寫，字體樣式的下拉會重復顯示Sans Serif，字體大小的下拉會重復顯示Normal

*/

.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,

.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {

content:"宋體";

font-family: "SimSun"!important;

}

.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,

.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {

content:"黑體";

font-family: "SimHei";

}

.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,

.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {

content:"微軟雅黑";

font-family: "Microsoft YaHei";

}

.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,

.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {

content:"楷體";

font-family: "KaiTi"!important;

}

.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,

.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {

content:"仿宋";

font-family: "FangSong";

}

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before,

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {

content:'45px';

}

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='60px']::before,

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {

content:'60px';

}

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='90px']::before,

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {

content:'90px';

}

總結

以上是生活随笔為你收集整理的vue set设置html根字体,vue-quill-editor安装及使用：自定义工具栏和自定义中文字体，把字体写在html的style中...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。