8cc55e1bf7
Former-commit-id: afef3af60139bd559aa150052fc3a72ec2f384a4 Former-commit-id: e2b324d8476ca2a52c625f2aee16972708a43bec Former-commit-id: ab3a3d9097c684c0fb1b54b1a5f228157b2f81ff
58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<template>
|
|
<d2-container type="ghost">
|
|
<el-card class="d2-mb">
|
|
<PageHeader
|
|
slot="header"
|
|
title="基本示例"
|
|
url="https://github.com/quilljs/quill">
|
|
</PageHeader>
|
|
<QuillEditor
|
|
style="min-height: 200px;"
|
|
v-model="value"
|
|
@text-change="textChangeHandler"
|
|
@selection-change="selectionChangeHandler"
|
|
@editor-change="editorChangeHandler">
|
|
</QuillEditor>
|
|
</el-card>
|
|
<el-card>
|
|
<template slot="header">输出</template>
|
|
<Highlight :code="formated"></Highlight>
|
|
</el-card>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import htmlFormat from '@/utils/htmlFormat.js'
|
|
import value from './value'
|
|
export default {
|
|
data () {
|
|
return {
|
|
htmlFormat,
|
|
value
|
|
}
|
|
},
|
|
computed: {
|
|
formated () {
|
|
return htmlFormat(this.value)
|
|
}
|
|
},
|
|
methods: {
|
|
textChangeHandler (delta, oldDelta, source) {
|
|
// console.group('QuillEditor textChangeHandler')
|
|
// console.log(delta, oldDelta, source)
|
|
// console.groupEnd()
|
|
},
|
|
selectionChangeHandler (range, oldRange, source) {
|
|
// console.group('QuillEditor selectionChangeHandler')
|
|
// console.log(range, oldRange, source)
|
|
// console.groupEnd()
|
|
},
|
|
editorChangeHandler (eventName, ...args) {
|
|
// console.group('QuillEditor editorChangeHandler')
|
|
// console.log(eventName, args)
|
|
// console.groupEnd()
|
|
}
|
|
}
|
|
}
|
|
</script>
|