富文本插件 vue-quill-editor

安装：

 npm i vue-quill-editor

导入富文本样式

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

导入富文本组件

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

注册组件

components: {
   quillEditor
}

使用

<quill-editor v-model="questionsAll.question" :options="editorOption" />

富文本配置

  editorOption: {
    placeholder: '请输入文章内容',
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ header: 1 }, { header: 2 }],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ indent: '-1' }, { indent: '+1' }],
        ['image']
      ]
    }
  }

样式 富文本高度

::v-deep .ql-editor {
   height: 250px;
}
::v-deep .ql-toolbar.ql-snow {
   padding: 0 8px;
}