inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div :class="prefixCls">
3     <quill-editor
4       v-model="content"
5       ref="myQuillEditor"
6       :options="editorOption"
7       @blur="onEditorBlur($event)"
8       @focus="onEditorFocus($event)"
9       @ready="onEditorReady($event)"
10       @change="onEditorChange($event)">
11     </quill-editor>
12
13   </div>
14 </template>
15
16 <script>
17 import 'quill/dist/quill.core.css'
18 import 'quill/dist/quill.snow.css'
19 import 'quill/dist/quill.bubble.css'
20
21 import { quillEditor } from 'vue-quill-editor'
22
23 export default {
24   name: 'QuillEditor',
25   components: {
26     quillEditor
27   },
28   props: {
29     prefixCls: {
30       type: String,
31       default: 'ant-editor-quill'
32     },
33     // 表单校验用字段
34     // eslint-disable-next-line
35     value: {
36       type: String
37     }
38   },
39   data () {
40     return {
41       content: null,
42       editorOption: {
43         // some quill options
44       }
45     }
46   },
47   methods: {
48     onEditorBlur (quill) {
49       console.log('editor blur!', quill)
50     },
51     onEditorFocus (quill) {
52       console.log('editor focus!', quill)
53     },
54     onEditorReady (quill) {
55       console.log('editor ready!', quill)
56     },
57     onEditorChange ({ quill, html, text }) {
58       console.log('editor change!', quill, html, text)
59       this.$emit('change', html)
60     }
61   },
62   watch: {
63     value (val) {
64       this.content = val
65     }
66   }
67 }
68 </script>
69
70 <style lang="less" scoped>
71 @import url('../index.less');
72
73 /* 覆盖 quill 默认边框圆角为 ant 默认圆角,用于统一 ant 组件风格 */
74 .ant-editor-quill {
75   /deep/ .ql-toolbar.ql-snow {
76     border-radius: @border-radius-base @border-radius-base 0 0;
77   }
78   /deep/ .ql-container.ql-snow {
79     border-radius: 0 0 @border-radius-base @border-radius-base;
80   }
81 }
82 </style>