关于vue中使用quillEditor，并引入Resize和Extend 

  1 <template>
  2      <quill-editor
  3      style="width:100%;height:100%"
  4       v-model="content"
  5       ref="myQuillEditor"
  6       :options="editorOption"
  7       @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
  8       @change="onEditorChange($event)">
  9     </quill-editor>
 10 </template>
 11 <script>
 12 import { quillEditor } from 'vue-quill-editor'
 13 import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
 14 import 'quill/dist/quill.core.css'
 15 import 'quill/dist/quill.snow.css'
 16 import 'quill/dist/quill.bubble.css'
 17 // import * as Quill from 'quill'  //引入编辑器
 18 // quill图片可拖拽改变大小
 19 import Quill from 'quill'
 20 import ImageResize from 'quill-image-resize-module' // 添加
 21 Quill.register('modules/ImageExtend', ImageExtend)
 22 Quill.register('modules/imageResize', ImageResize)
 23 export default{
 24   components: {
 25     quillEditor
 26   },
 27   props: ['value'],
 28   computed: {
 29     content: {
 30       get: function () {
 31         return this.value
 32       },
 33       set: function (newVal, oldVal) {
 34         this.newContent = newVal
 35       }
 36     }
 37   },
 38   data () {
 39     return {
 40       newContent: ' ',
 41       editorOption: {
 42         modules: {
 43           // toolbar: [
 44           //   ['bold', 'italic', 'underline', 'strike'],
 45           //   [{ 'header': 1 }, { 'header': 2 }],
 46           //   [{ 'list': 'ordered' }, { 'list': 'bullet' }],
 47           //   [{ 'size': ['small', false, 'large', 'huge'] }],
 48           //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 49           //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
 50           //   [{ 'font': [] }],
 51           //   ['image', 'video']
 52           // ],
 53           toolbar: {
 54             container: container,
 55             handlers: {
 56               'image': function () {
 57                 QuillWatch.emit(this.quill.id)
 58               }
 59             }
 60           },
 61           imageResize: { // 调整上传过后图片大小配置。
 62             displayStyles: {
 63               backgroundColor: 'black',
 64               border: 'none',
 65               color: 'white'
 66             },
 67             modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
 68           },
 69           ImageExtend: {
 70             loading: true,
 71             name: 'file',
 72             size: 3, // 单位为M, 1M = 1024KB
 73             action: '/api/operations/upload',
 74             // headers: (xhr) => {
 75             // },
 76             response: (res) => {
 77               console.log(res)
 78               return '/api/operations/preview/' + res.obj
 79             }
 80           }
 81         }
 82       }
 83     }
 84   },
 85   methods: {
 86     onEditorBlur () { // 失去焦点事件
 87     },
 88     onEditorFocus () { // 获得焦点事件
 89     },
 90     onEditorChange () { // 内容改变事件
 91       this.$emit('change', this.newContent)
 92     }
 93   }
 94 }
 95 </script>
 96 <style lang="less" >
 97  .ql-editor{
 98    height:600px;
 99  }
100 </style>

 

posted @ 2020-05-09 12:30  奇多Cheeto  阅读(576)  评论(0)    收藏  举报