vue富文本vue-quill-editor

3.main.js注册组件:

importVueQuillEditor from 'vue-quill-editor'  // 编辑器

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

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

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

Vue.use(VueQuillEditor)

4.webstorm里使用：

二、自定义工具栏toolbar

1、具体配置如下，需要哪个写哪个。

其中color、background、font、align都是有默认值的，写一个空数据即可。如果想要自定义，请往下看。

2、自定义字体列表，加入自己需要的字体

（1）引入一个单独自定义的font.css文件（如下）在app.vue文件中，因为要在初始化的时候就引入才能覆盖掉默认的！！很重要

（2）font.css

把需要自定义放在字体列表的字体放在这个css中，选择器如下。data-value后的值是要拼在.ql-font-后面的，需要保持一致。

[data-value=a]    ql-font-a

content指的是字体列表中的选项

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {

  content: "宋体";

  font-family: "SimSun";

}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {

content: "黑体";

font-family: "SimHei";

}

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

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

content: "微软雅黑";

font-family: "Microsoft YaHei";

}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {

content: "楷体";

font-family: "KaiTi";

}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {

content: "仿宋";

font-family: "FangSong";

}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {

content: "Arial";

font-family: "Arial";

}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {

content: "Times New Roman";

font-family: "Times New Roman";

}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {

content: "sans-serif";

font-family: "sans-serif";

}

.ql-font-SimSun {

  font-family: "SimSun";

}

.ql-font-SimHei {

  font-family: "SimHei";

}

.ql-font-Microsoft-YaHei {

  font-family: "Microsoft YaHei";

}

.ql-font-KaiTi {

  font-family: "KaiTi";

}

.ql-font-FangSong {

  font-family: "FangSong";

}

.ql-font-Arial {

  font-family: "Arial";

}

.ql-font-Times-New-Roman {

  font-family: "Times New Roman";

}

.ql-font-sans-serif {

  font-family: "sans-serif";

}