12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <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 {
- /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>
|