vue set设置html根字体,vue-quill-editor安装及使用：自定义工具栏和自定义中文字体，把字体写在html的style中...

一、自定义工具栏把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';

}