1.安装#

npm install vue-quill-editor -S

2.引入到项目中

import { quillEditor, Quill } from 'vue-quill-editor'

import '@/assets/css/quill.core.css'

import '@/assets/css/quill.snow.css'

富文本编辑器配置

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ align: '' }, { align: 'center' }, { align: 'right' }],
  [{
    header: [1, 2, 3, 4, 5, 6, false]
  }],
  [{
    color: []
  }, {
    background: []
  }],
  ['link', 'image']
]

data () {
    let that = this
    return {
    newEditContent：'',
      editorOption: {
        toolbarOptions,
        placeholder: '在这里输入文字',
        theme: 'snow', // or 'bubble'
        modules: {
          // 图片尺寸设置
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            handleStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white',
              borderRadius: '50%'
            }
          },
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                that.uploadType = 'IMAGE'
                that.$refs.files.click()
              },
              video: function (value) {
                // 不支持视频上传
                that.uploadType = 'VIDEO'
                that.$refs.files.click()
              }
            }
          }
        }
      },
    }
  },

在页面上写组件

  <quill-editor v-model="newEditContent"
                placeholder="发布讨论"
                :options="editorOption"
                @focus="quillEditorFocus($event)"
                ref="myQuillEditor"></quill-editor>

编辑器调整图片大小

1.安装：

npm install quill-image-resize-module --save

2.引入

import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)

关于vue-quill-editor中工具栏功能的详细配置：

blog.csdn.net/Alison_Rose…