1、npm install quill-editor -- save
2、添加組件
<quill-editor v-model="content"
? ? ? ? ? ? ? ref="myQuillEditor"
? ? ? ? ? ? ? :options="editorOption"
? ? ? ? ? ? ? @blur="onEditorBlur($event)"
? ? ? ? ? ? ? @focus="onEditorFocus($event)"
? ? ? ? ? ? ? @ready="onEditorReady($event)"
? ? ? ? ? ? ? @change="onEditorChange">
</quill-editor>
3、引入相關(guān)文件及script
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor}from 'vue-quill-editor'
export default {
components: {
quillEditor
},
? ? data () {
return {
? ? ? ? ? ? content:'',
? ? ? ? ? ? editorOption:{}
};
? ? },
? ? methods: {
onEditorBlur(quill) {
// console.log('editor blur!', quill)
? ? ? ? },
? ? ? ? onEditorFocus(quill) {
// console.log('editor focus!', quill)
? ? ? ? },
? ? ? ? onEditorReady(quill) {
// console.log('editor ready!', quill)
? ? ? ? },
? ? ? ? onEditorChange({ quill, html, text }) {
// console.log('editor change!', quill, html, text)
? ? ? ? ? ? this.content = html
}
},
? ? computed: {
editor() {
return this.$refs.myQuillEditor.quill
? ? ? ? }
},
}
