3ee77c7059
Former-commit-id: 8243984da4fe1cef02128249e3553a390da9aa8b Former-commit-id: 71a9ff274c3158e5b3284a6252bef69cfcd0d680 Former-commit-id: 37de1e7e35cf19efa01f2011d012ef53e2065d2e
52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<Container type="ghost">
|
|
<el-card class="mb">
|
|
<QuillEditor
|
|
style="min-height: 200px;"
|
|
v-model="value"
|
|
@text-change="textChangeHandler"
|
|
@selection-change="selectionChangeHandler"
|
|
@editor-change="editorChangeHandler">
|
|
</QuillEditor>
|
|
</el-card>
|
|
<el-card>
|
|
<Highlight :code="formated"></Highlight>
|
|
</el-card>
|
|
</Container>
|
|
</template>
|
|
|
|
<script>
|
|
import formator from '@/assets/library/tool/format.js'
|
|
import value from './value'
|
|
export default {
|
|
data () {
|
|
return {
|
|
formator,
|
|
value
|
|
}
|
|
},
|
|
computed: {
|
|
formated () {
|
|
return formator(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>
|