e8df163268
Former-commit-id: 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly ee00a9a643c513d59dff1cc739dc0a566bce63b4 [formerly 715c6c4ed9855dcc7ad775195f6686a427d085d3]]]]] Former-commit-id: e567a7e3db7019f2567f9fa769fea6639e75dd42 Former-commit-id: 6df46229a1ccd1e341501e9fee419999e9daeeca Former-commit-id: d3781c6cdf7e414047cafc9a7244a7abc6e7b778 [formerly a8d000bfdbfc4872d1383f17e8e8f6a4bdb239c3] Former-commit-id: 1f6bad0a0b3462e6a53692af6a153b0c7fbdd0ae Former-commit-id: e693037a587d7ddab5d87f311a4a0eda1a2c0c0b Former-commit-id: 8294c8385c4852f8cf0a2f21cf3ac655918845f1 Former-commit-id: 7ab11d42decf2d1bba7c26919ca86de20f664918 Former-commit-id: 4ef43b3c25ce828467141dafb206bf6bc9ade6d3
100 lines
2.7 KiB
Vue
100 lines
2.7 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: 'd2-quill',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
Quill: undefined,
|
|
currentValue: '',
|
|
options: {
|
|
theme: 'snow',
|
|
bounds: document.body,
|
|
debug: 'warn',
|
|
modules: {
|
|
toolbar: [
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
['blockquote', 'code-block'],
|
|
[{ '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
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler (val) {
|
|
// 确认是新的值
|
|
if (val !== this.currentValue) {
|
|
this.currentValue = val
|
|
// 尝试更新
|
|
if (this.Quill) {
|
|
this.Quill.pasteHTML(this.value)
|
|
}
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted () {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init () {
|
|
const editor = this.$refs.editor
|
|
// 初始化编辑器
|
|
this.Quill = new Quill(editor, this.options)
|
|
// 默认值
|
|
this.Quill.pasteHTML(this.currentValue)
|
|
// 绑定事件
|
|
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.currentValue = html
|
|
// 发出事件 v-model
|
|
this.$emit('input', html)
|
|
// 发出事件
|
|
this.$emit('change', { html, text, quill })
|
|
})
|
|
// 将一些 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>
|