vue-quill-editor he el-upload实现富文本编译器上传图片及文字功能

安装vue-quill-editor

npm install vue-quill-editor -S

安装quill

npm install quill -S

<template>
  <el-upload
            id="elUpload"
            :show-file-list="false"
            class="upload-demo"
            name="articleImage"
            :action="$urlPath+ '/upload/image/uploadImg'"
            :on-success="handleSuccess"
            multiple
            :limit="3"
          >
            <el-button id="elBtn" size="small" type="primary">点击上传</el-button>
          </el-upload>
          <quill-editor
            style="height: 200px;width: 100%;margin-bottom: 80px"
            v-model="ruleForm.articleContentStr"
            :options="editorOption"
            ref="QuillEditor"
          ></quill-editor>
  
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
//import 'quill/dist/quill.core.css'
//import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'; // 富文本基于quill
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction

  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean'], // remove formatting button
]
const bindings = {
  custom: {
    key: 13,
    handler: function (range, context) {
      this.quill.insertText(range.index, '\n ')
      setTimeout(() => {
        let nowRange = this.quill.getSelection().index - 1
        this.quill.setSelection(nowRange)
      }, 0)
    },
  },
}
export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用iview图片上传
                  document.getElementById('elBtn').click()
                } else {
                  this.quill.format('image', false)
                }
              },
            },
          },
        },
      },
     }
    },
   methods: {
    handleSuccess(res) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        Message.error('图片插入失败')
      }
    },
   }
</script>

在页面中展示富文本编辑器的内容

<div class="ql-snow">
      <div style="margin: 0 40px" class="ql-editor" v-html="articleContentStr.articleContentStr"></div>
    </div>

展示时修改上传图片的样式或者其他标签的样式的方法

const regex = new RegExp('<img', 'gi')
this.articleContentStr.articleContentStr = this.articleContentStr.articleContentStr.replace(regex, `<img style="max-width: 70%; height: auto;padding: 20px 30px;display:block;margin: 0 auto"`);