1.下載Vue-Quill-Editor
npm install vue-quill-editor --save
2.下載quill（Vue-Quill-Editor需要依賴）
npm install quill --save
3.代碼
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //調(diào)用編輯器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: {
quillEditor
},
data() {
return {
content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
editorOption: {}
}
},
methods: {
onEditorReady(editor) { // 準(zhǔn)備編輯器
},
onEditorBlur(){}, // 失去焦點(diǎn)事件
onEditorFocus(){}, // 獲得焦點(diǎn)事件
onEditorChange(){}, // 內(nèi)容改變事件
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
}
}
</script>
4.添加富文本內(nèi)容后的頁(yè)面展示
<div class="ql-container ql-snow">
<div class="ql-editor" v-html="content">
</div>
</div>
5.需要注意vue-quill-editor只兼容iE10以上瀏覽器辕坝，以下是不能用的荐健。
6.我曾經(jīng)在項(xiàng)目中引用的時(shí)候會(huì)出現(xiàn)富文本編輯器內(nèi)容無法刪除酱畅，只能刪除第一個(gè)字符，后面的點(diǎn)擊鍵盤刪除就沒有用江场。找了很多方法沒有找出來原因纺酸，但是單獨(dú)創(chuàng)建一個(gè)項(xiàng)目引用的時(shí)候是沒有問題的，最后的解決方式就是在頁(yè)面創(chuàng)建的時(shí)候址否，自動(dòng)觸發(fā)一個(gè)鍵盤事件餐蔬，然后就可以了。
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==13){ // enter 鍵
//要做的事情
}
}
