Vue使用vue-quill-editor实现富文本需求

Quill富文本编辑器
简单记录

一，组件中引入
import { quillEditor } from 'vue-quill-editor'
样式文件引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

将quillEditor 注册为组件，并写出标签

<quill-editor
      class="editor"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
      :value="content"
      :options="editorOption"
    />

editorOption: {
//此处设置quill的一些属性和其模块属性
        placeholder: '占位占位占位',
        modules: {
          toolbar: {
            container: toolbarOptions,
            theme: 'snow'
            handlers: {
            //此处定义toolbar上按钮的行为
              'image': (value) => {
                //用户点击了toolbar的图片按钮之后的行为
              },
              'link': (value) => {
                //用户点击了toolbar的link按钮之后的行为
              }
            }
          }
        }
}

onEditorReady (quill) {
      this.quill = quill
      }
onEditorChange ({ quill, html, text }) {
      //处理富文本内容
    }