f0fb0e68a5
Former-commit-id: 9b3ba072c32c3f3b701dfe7f278031ede4dc2255 Former-commit-id: e6a843a9044f670ee739f39f412a31be242c008c Former-commit-id: 220bcf5eab6ae030ba8d1f26d200453fdacda264
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<d2-container>
|
|
<d2-demo-page-header slot="header" title="基本示例"/>
|
|
<d2-quill
|
|
style="min-height: 200px;"
|
|
v-model="value"
|
|
@text-change="textChangeHandler"
|
|
@selection-change="selectionChangeHandler"
|
|
@editor-change="editorChangeHandler"/>
|
|
<el-card shadow="never" class="d2-mt">
|
|
<d2-highlight :code="formated"/>
|
|
</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>
|