寫在開頭：
集成quill已經(jīng)有了vue-quill-editor了。我只是抄一點點東西出來解決自己的問題。
做這個事情不是脫褲子放屁，也不是為了學(xué)習(xí)別人的代碼。
由于我自己的服務(wù)器帶寬很小，所以我會把非業(yè)務(wù)代碼的第三方工具都提取出來，改用cdn。
唯獨vue-quill-editor沒有cdn（quill卻有），我又很窮，我能怎么辦？
我自己的博客后臺管理系統(tǒng)，去掉vue-quill-editor之前打包完的chunk是1M，去掉之后39k......
沒錯，就是這樣。
如果你也想像我這么做，那就繼續(xù)往下看，或許會有那么一點點的幫助。
其實說白了 vue-quill-editor 就是將 quill 封裝了一下，做成了一個組件。（當(dāng)然，是佩服別人的啦，我自己又什么都沒有做。。。）
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的源碼打開，復(fù)制對我有用的就行。
vue-quill-editor做了很多處理，我不需要，所以只要關(guān)心文本的更新部分就行。
這里有3點說明：
- text-change：保存文本內(nèi)容并更新父組件數(shù)據(jù)。
- 監(jiān)聽父級的content：更新富文本編輯器。
- modules>history>userOnly：這個是查官方文檔找到的，歷史記錄中只保存用戶操作的記錄。加這個的目的是為了解決，富文本初始化內(nèi)容是異步獲取的，組件初始化的時候獲取的內(nèi)容其實是空，之后通過watch更新到視圖中。所以如果在編輯文章的時候，用戶直接按ctrl+z會莫名其妙將文章內(nèi)容撤銷刪除。
然后，就可以調(diào)用這個組件了：
<editor :content="formData.content" @edit="formData.content = arguments[0]"></editor>
通過這樣，我們完全可以只引用quill來完成我們正常功能。這樣，我們就可以把所有第三方工具全部提取出來了。頁面加載速度完全不是一個層次的。
如果有朋友在使用中發(fā)現(xiàn)問題，也歡迎一起研究，解決。
如何在vue-cli項目中提取第三方工具，可以看我的這篇文章：如何將 vue-router、UI框架等第三方從打包文件中抽取出來
在組件中可以定制一些我們自己需要用到的功能，我會在其他文章里寫，比如：
quill上傳圖片默認(rèn)是插入一個dateURL字符串，這個字符串特別長，實際開發(fā)沒人會往數(shù)據(jù)庫里存這個東西，不怕死的可以試試。如何改為自動上傳圖片并插入服務(wù)器靜態(tài)圖片地址。
如何將 quill 圖片上傳到服務(wù)器我們經(jīng)常習(xí)慣用QQ截圖后直接粘貼，quill本身是沒有這個功能的，我們?nèi)绾巫约禾砑印?br> vue如何給quill添加粘貼圖片的功能
quill插入網(wǎng)絡(luò)視頻是默認(rèn)需要直接輸入視頻地址的，但是國內(nèi)的視頻網(wǎng)站在分享那里是配好的iframe（例如，優(yōu)酷和bilibili都是這樣），我們每次還要自己手動把里面的地址單獨復(fù)制出來，很麻煩，如何重新定義插入視頻功能，讓我們可以直接把完整的iframe代碼插入進去。
vue如何修改quill插入視頻功能
