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

Posted 2021-09-04 Litchi

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 }) {
      //处理富文本内容
    }