79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div ref="editor"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Quill from 'quill'
|
||
|
|
import 'quill/dist/quill.core.css'
|
||
|
|
import 'quill/dist/quill.snow.css'
|
||
|
|
import 'quill/dist/quill.bubble.css'
|
||
|
|
export default {
|
||
|
|
name: 'QuillEditor',
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
Quill: undefined,
|
||
|
|
options: {
|
||
|
|
theme: 'snow',
|
||
|
|
bounds: document.body,
|
||
|
|
debug: 'warn',
|
||
|
|
modules: {
|
||
|
|
toolbar: [
|
||
|
|
['bold', 'italic', 'underline', 'strike'],
|
||
|
|
['blockquote', 'code-block'],
|
||
|
|
[{ 'header': 1 }, { 'header': 2 }],
|
||
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
||
|
|
[{ 'script': 'sub' }, { 'script': 'super' }],
|
||
|
|
[{ 'indent': '-1' }, { 'indent': '+1' }],
|
||
|
|
[{ 'direction': 'rtl' }],
|
||
|
|
[{ 'size': ['small', false, 'large', 'huge'] }],
|
||
|
|
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
||
|
|
[{ 'color': [] }, { 'background': [] }],
|
||
|
|
[{ 'font': [] }],
|
||
|
|
[{ 'align': [] }],
|
||
|
|
['clean'],
|
||
|
|
['link', 'image']
|
||
|
|
]
|
||
|
|
},
|
||
|
|
placeholder: '书写你的内容',
|
||
|
|
readOnly: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init () {
|
||
|
|
const editor = this.$refs.editor
|
||
|
|
this.Quill = new Quill(editor, this.options)
|
||
|
|
// 默认值
|
||
|
|
this.Quill.pasteHTML(this.value)
|
||
|
|
// 绑定事件
|
||
|
|
this.Quill.on('text-change', (delta, oldDelta, source) => {
|
||
|
|
const html = this.$refs.editor.children[0].innerHTML
|
||
|
|
const text = this.Quill.getText()
|
||
|
|
const quill = this.Quill
|
||
|
|
this.$emit('input', html)
|
||
|
|
this.$emit('change', {html, text, quill})
|
||
|
|
})
|
||
|
|
this.Quill.on('text-change', (delta, oldDelta, source) => {
|
||
|
|
this.$emit('text-change', delta, oldDelta, source)
|
||
|
|
})
|
||
|
|
this.Quill.on('selection-change', (range, oldRange, source) => {
|
||
|
|
this.$emit('selection-change', range, oldRange, source)
|
||
|
|
})
|
||
|
|
this.Quill.on('editor-change', (eventName, ...args) => {
|
||
|
|
this.$emit('editor-change', eventName, ...args)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|