Vue Element ui 富文本图片上传加地址插入富文本与富文本

Vue Element ui 富文本图片上传加地址插入富文本与富文本

富文本安装

npm install vue-quill-editor -S
npm install quill -S

引入富文本样式

import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'

js部分

components: {
   
    quillEditor
}

1.先安装插件

npm install vue-quill-editor --save-dev
npm install quill-image-extend-module --save-dev

2.然后引入

import {
    quillEditor, Quill } from 'vue-quill-editor'
import {
    container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)

使用 quill-editor，改写 ImageExtend，图片上传、 img 标签改写（将图片地址插入 img 标签）

效果:

<template>
      <quill-editor
              class="lbj_editor"
              v-model="lbjaddShop.goods_introduce"
              @change="onEditorChange($event)"
              id="desc"
              ref="quill"
              :options="editorOption">
      </quill-editor>
</template>

<script