做博客系统、商城系统、cms系统等系统的时候需要自动生成网页，自动生成多媒体等图片网页的时候我们就用到了富文本编辑器。以前用jquery的时候经常使用的有百度富文本编辑器UEditor，不过因为后期自适应不大好使，也就换成别的了，有时候用过Ckeditor。自从用了element ui后打算做一个博客系统，后来就研究了一下Vue-Quill-Editor，嵌入到element ui中。Vue-Quill-Editor，这是一款基于Quill、适用于Vue的富文本编辑器。
1.安装Vue-Quill-Editor
接下来我们看一下怎么安装Vue-Quill-Editor富文本编辑器，首先用cmd运行打开vue的项目路径。运行Vue-Quill-Editor的安装语句
代码语言：javascript复制npm install vue-quill-editor -S2.在vue页面中引入vue-quill-editor
代码语言：javascript复制 import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {
quillEditor,
// Quill
} from 'vue-quill-editor';
import * as Quill from 'quill' //引入编辑器
import {
container,
ImageExtend,
QuillWatch
} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)3.在页面中布局
代码语言：javascript复制 <div prop="content">
<quill-editor ref="myTextEditor" v-model="Articleform.content" :options="editorOption"></quill-editor>
</div>4.初期化定义控件
代码语言：javascript复制export default {
name: 'content_VueEditor',
data: function() {
return {
userInfo: {},
content: '',
editorOption: {
modules: {
ImageExtend: {
loading: true, // 可选参数 是否显示上传进度和提示语
name: 'file', // 图片参数名
size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
action: constHelp['WEBAPIURL'] 'blog/ArticleUpload', //服务器地址, 如果action为空，则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: (res) => {
return res.data;
},
headers: (xhr) => {}, // 可选参数 设置请求头部
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
error: () => {}, // 可选参数 自定义网络错误触发的事件
change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
},
toolbar: {
handlers: {
'image': function() {
QuillWatch.emit(this.quill.id)
}
},
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{
header: 1
}, {
header: 2
}], // 1、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: []
}], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
], //工具菜单栏配置
}
},
placeholder: '请在这里留下您的痕迹', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
created() {
},
components: {
quillEditor
},
methods: {
onEditorChange({
editor,
html,
text
}) {
this.content = html;
},
submit() {
console.log(this.content);
this.$message.success('提交成功！');
}
}
}总结
在vue中使用vue-quill-editor基本上就这些配置，不是很高新的技术，只是希望写下来为了大家以后写代码的时候可以复制粘贴，更好的专心于业务，不用太过担心技术上的问题。
