一、自定義工具欄把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、應用頁面引入並生成富文本域：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<quill-editor
v-model="content"
:options="editorOption"
@change="onEditorChange($event)"
>
</quill-editor>
</div>
</template>
<script>
//引入相關文件
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)
export default {
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() {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.quill-editor >>> .ql-container {
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'; } </style>