vue-quill-editor 配置

以前用的“wangeditor”，这个写对于文章这种难搞。会把复制来的话，什么字体，字号什么杂七杂八都加上
富文本编辑器其实很难搞，quill还算可以此组件支持ssr,不过文档又恼火。此编辑器demo

image.png

以下是自己配置的

install vue-quill-editor,quill-image-resize-module
vue中main.js

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

webpack.base.conf.js
在plugins下添加

 plugins: [
...
new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ],

其实就是一个快捷访问之类的， quill-image-resize-module里面有访问window.Quill的东西

目标文件

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import Quill from 'quill'
  import { quillEditor} from 'vue-quill-editor'
  console.log(Quill.register)
  console.log(Quill)
  import ImageResize from 'quill-image-resize-module'  //添加
  Quill.register('modules/imageResize', ImageResize)  //添加

这quill没管了快不快捷了，一股脑用上

菜单配置

 let editorOpt = {
    modules: {
      imageResize: {   //添加
        displayStyles: {   //添加
          backgroundColor: 'black',
          border: 'none',
          color: 'white'
        },
        modules: ['Resize', 'DisplaySize', 'Toolbar']   //添加
      },
      toolbar: [
        [{ 'size': ['small', false, 'large'] }],
        ['bold', 'italic'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        ['link', 'image'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] }],
      ],
        history: {
        delay: 1000,
          maxStack: 50,
          userOnly: false
      },
    }
  }

html部分

 <quill-editor style="height: calc(100% - 40px)" v-model="form.details" :options="editorOption"
                    @blur="onEditorBlur($event)"
                     @focus="onEditorFocus($event)"
                     @ready="onEditorReady($event)">
</quill-editor>

ojbk