83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<template>
|
|
<div :class="prefixCls">
|
|
<quill-editor
|
|
v-model="content"
|
|
ref="myQuillEditor"
|
|
:options="editorOption"
|
|
@blur="onEditorBlur($event)"
|
|
@focus="onEditorFocus($event)"
|
|
@ready="onEditorReady($event)"
|
|
@change="onEditorChange($event)">
|
|
</quill-editor>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import 'quill/dist/quill.core.css'
|
|
import 'quill/dist/quill.snow.css'
|
|
import 'quill/dist/quill.bubble.css'
|
|
|
|
import { quillEditor } from 'vue-quill-editor'
|
|
|
|
export default {
|
|
name: 'QuillEditor',
|
|
components: {
|
|
quillEditor
|
|
},
|
|
props: {
|
|
prefixCls: {
|
|
type: String,
|
|
default: 'ant-editor-quill'
|
|
},
|
|
// 表单校验用字段
|
|
// eslint-disable-next-line
|
|
value: {
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
content: null,
|
|
editorOption: {
|
|
// some quill options
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onEditorBlur (quill) {
|
|
console.log('editor blur!', quill)
|
|
},
|
|
onEditorFocus (quill) {
|
|
console.log('editor focus!', quill)
|
|
},
|
|
onEditorReady (quill) {
|
|
console.log('editor ready!', quill)
|
|
},
|
|
onEditorChange ({ quill, html, text }) {
|
|
console.log('editor change!', quill, html, text)
|
|
this.$emit('change', html)
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
this.content = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('../index.less');
|
|
|
|
/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
|
|
.ant-editor-quill {
|
|
line-height: initial;
|
|
/deep/ .ql-toolbar.ql-snow {
|
|
border-radius: @border-radius-base @border-radius-base 0 0;
|
|
}
|
|
/deep/ .ql-container.ql-snow {
|
|
border-radius: 0 0 @border-radius-base @border-radius-base;
|
|
}
|
|
}
|
|
</style>
|