<template>
<!-- Two-way Data-Binding -->
<keep-alive>
<quill-editor ref="myQuillEditor" v-model.sync="quillContent" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@ready="onEditorReady($event)" @change="onEditorChange($event)" style="height: 300px; width: 80%;" />
</keep-alive>
</template>
<script>
// You can also register Quill modules in the component
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import QuillCursors from 'quill-cursors'
export default {
components: {
quillEditor
},
props: {
quillContent: {
type: String,
required: true
}
},
data() {
return {
// content: this.quillContent,
selection: null,
cursors: {},
Image:{}
}
},
methods: {
onEditorBlur(quill) {
// console.log('editor blur!', quill)
},
onEditorFocus(quill) {
// console.log('editor focus!', quill)
},
onEditorReady(quill) {
this.selection = quill.getSelection()
// console.log('editor ready!', quill)
},
onEditorChange({ quill, html, text }) {
console.log(html, 'html')
// console.log(text, 'text')
this.content = html
this.$emit('input', this.content,this.Image)
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted() {
// Listen to cursor updates from the cursors module
this.$refs.myQuillEditor.quill.on('cursors-update', (cursors) => {
this.cursors = cursors
})
}
}
</script>
vue中quill的富文本编辑器的使用,
最新推荐文章于 2023-05-19 00:20:34 发布