vue+element ui +vue-quill-editor 实现富文本编辑器功能

一、兼容性

vue-quill-editor 不兼容ie10以及ie10以下，所以有兼容性需求时，慎用。

二、实现代码

三、技术点

1、vue-quill-editor 上传图片或者视频时，生成的content字段中图片的部分会转换成base64,这样当我们与后台交互时，则会因为字段长度过大，而提交失败，所以我们结合element-ui中的upload组件，将资源文件传到指定的服务器，再将接口返回的图片地址插入值编辑器中

2、对toolbar的自定义，在做的过程的，对字体大小、字体类型的设置通过配置项，总是很难实现。

当做字体类型时，需要另外创建一个font.css  

data-value = 字体设置中value的值     ql-font-字体设置中value的值      这个是要一 一 对应

.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";
}

在main.js中引用

import './assets/css/font.css'