写在开头：
集成quill已经有了vue-quill-editor了。我只是抄一点点东西出来解决自己的问题。
做这个事情不是脱裤子放屁，也不是为了学习别人的代码。
由于我自己的服务器带宽很小，所以我会把非业务代码的第三方工具都提取出来，改用cdn。
唯独vue-quill-editor没有cdn（quill却有），我又很穷，我能怎么办？
我自己的博客后台管理系统，去掉vue-quill-editor之前打包完的chunk是1M，去掉之后39k......
没错，就是这样。
如果你也想像我这么做，那就继续往下看，或许会有那么一点点的帮助。
其实说白了 vue-quill-editor 就是将 quill 封装了一下，做成了一个组件。（当然，是佩服别人的啦，我自己又什么都没有做。。。）
OK，既然人家做好了，咱们照着抄一下吧。。。
首先，我们也弄一个组件，像这样。
<template>
<div ref="editor"></div>
</template>
<script>
export default {
name: "editor",
props: ['content'],
data() {
return {
_content: ''
}
},
watch: {
content(newVal, oldVal) {
if (this.quill) {
if (newVal && newVal !== this._content) {
this._content = newVal;
this.quill.clipboard.dangerouslyPasteHTML(newVal);
} else if(!newVal) {
this.quill.setText('');
}
}
}
},
mounted() {
this.quill = new Quill(this.$refs.editor, {
theme: 'snow',
modules: {
history: {
userOnly: true
}
}
});
this.quill.on('text-change', (delta, oldDelta, source) => {
let html = this.$refs.editor.children[0].innerHTML;
if (html === '<p><br></p>') html = '';
this._content = html;
this.$emit('edit', this._content);
})
}
}
</script>
<style scoped>
</style>
既然是说了是抄，就把vue-quill-editor的源码打开，复制对我有用的就行。
vue-quill-editor做了很多处理，我不需要，所以只要关心文本的更新部分就行。
这里有3点说明：
- text-change：保存文本内容并更新父组件数据。
- 监听父级的content：更新富文本编辑器。
- modules>history>userOnly：这个是查官方文档找到的，历史记录中只保存用户操作的记录。加这个的目的是为了解决，富文本初始化内容是异步获取的，组件初始化的时候获取的内容其实是空，之后通过watch更新到视图中。所以如果在编辑文章的时候，用户直接按ctrl+z会莫名其妙将文章内容撤销删除。
然后，就可以调用这个组件了：
<editor :content="formData.content" @edit="formData.content = arguments[0]"></editor>
通过这样，我们完全可以只引用quill来完成我们正常功能。这样，我们就可以把所有第三方工具全部提取出来了。页面加载速度完全不是一个层次的。
如果有朋友在使用中发现问题，也欢迎一起研究，解决。
如何在vue-cli项目中提取第三方工具，可以看我的这篇文章：如何将 vue-router、UI框架等第三方从打包文件中抽取出来
在组件中可以定制一些我们自己需要用到的功能，我会在其他文章里写，比如：
-
quill上传图片默认是插入一个dateURL字符串，这个字符串特别长，实际开发没人会往数据库里存这个东西，不怕死的可以试试。如何改为自动上传图片并插入服务器静态图片地址。
如何将 quill 图片上传到服务器 -
我们经常习惯用QQ截图后直接粘贴，quill本身是没有这个功能的，我们如何自己添加。
vue如何给quill添加粘贴图片的功能 -
quill插入网络视频是默认需要直接输入视频地址的，但是国内的视频网站在分享那里是配好的iframe（例如，优酷和bilibili都是这样），我们每次还要自己手动把里面的地址单独复制出来，很麻烦，如何重新定义插入视频功能，让我们可以直接把完整的iframe代码插入进去。
vue如何修改quill插入视频功能
网友评论