什么是富文本编辑器?
它的功能跟我们的word一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。
image.png
vue-quill-editor
这个据说大企业用的比较多，百度一下技术背景，对它的评价是不限制框架，但是需要定制，理念很先进。
1、安装依赖
第一条
npm install vue-quill-editor –save 或者
yarn add vue-quill-editor
第二条
npm install quill-image-extend-module --save-dev
yarn add quill-image-extend-module
2、使用
在src/plugins/创建一个文件名为VueQuillEditor.js(可以自定义文件名)
VueQuillEditor.js放入以下代码
不然文本编辑器会出现不规则黑白几何图形
可以在main.js中引入，也可以在具体使用的vue文件中引入
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
在main.js中引入
import './plugins/VueQuillEditor.js'
vue文件代码
在Vue的script标签中中引入
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
data()中放入下面的代码
content:"",
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: "后台接口地址参数name",
size: 0.02,
action: "后台接口地址",
response: res => {
return res.data.fileUrl;
},
headers: (xhr,formData) => {
xhr.setRequestHeader(
"X-Nideshop-Token",
localStorage.getItem("token")
);
}, // 可选参数 设置请求头部
sizeError: () => {
return this.$message.error("图片超过50kb");
} // 图片超过大小的回调
},
toolbar: {
container: [
["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: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 颜色选择
[{ font: [] }], // 字体
[{ align: [] }], // 居中
["link", "image"],
["clean"]
],
handlers: {
image: function() {
QuillWatch.emit(this.quill.id);
}
}
}
}
}