vue使用富文本编辑器

npm install vue-quill-editor --save

全局main.js

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

局部

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
  }

引用

<quillEditor v-model="formData.content" />

隐藏工具栏

<quillEditor v-model="formData.content" style="width: 99.5%" class="quill-editor1" />


.quill-editor1 {
  .ql-toolbar {
    display: none;
   }
  .ql-container {
    border:0;
  }
}

只读

<quillEditor v-model="formData.content" style="width: 99.5%" class="quill-editor1" @focus="focus($event)" />

focus(event) {
 event.enable(false) //设置富文本编辑器不可编辑
},