记录一下插件中的vue2-editor中上传图片的问题

此处的场景是,项目中需要引入一个插件,而这个插件中使用了vue2-editor,所以不太好直接在项目中控制vue2-editor,而是选择修改这个插件的源码,在插件源码处,将vue2-editor封装成组件并配置axios环境,做图片上传,所以此处的token和baseurl都是由项目==>插件==>vue2-editor

安装npm install --save vue2-editor

vue2-editor默认上传图片时是将图片转base64保存的,如果需要上传到服务器,则需要

<vue-editor
      ref="editor"
      @text-change="textChange"
      v-model="editorContent"
      :editorToolbar="customToolbar"
      :disabled="isdisable"
      useCustomImageHandler 
      @image-added="handleImageAdded"
    ></vue-editor>
 //重点是这两个属性 注意 image-added 此处不能用驼峰命名法,否则无效  useCustomImageHandler   @image-added="handleImageAdded"
 methods:{
 	handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData()
      formData.append('file', file)
      this.$axios({
        url:`${this.baseUrl}/api/file/uploadFile`,
        method: 'POST',
        headers: {
          token: this.isToken   //此处的token是我传过去的
        },
        data: formData
      })
        .then(res => {
        //   let url = [`${this.baseUrl}${res.data.data.originalPath}`];  
          let url = res.data.data.originalPath
          console.log(`${this.baseUrl}${url}`)
            Editor.insertEmbed(cursorLocation, 'image', `${this.baseUrl}/res${url}`)
          resetUploader()
        })
        .catch(err => {
          console.log(err)
        })
    }
 }

下面展示项目中直接使用vue2-editor编辑器上传图片并回显的方法
1.注册一个vue2Editor.vue组件

<template>
    <div class="editor">
        <vue-editor  ref="editor" @text-change="textChange" v-model="editorContent" :editorToolbar="customToolbar" useCustomImageHandler @image-added="handleImageAdded" ></vue-editor>
    </div>
</template>
<script>
import { VueEditor } from "vue2-editor";
import { uploadUidFile } from "@/api/file/document";   //这个是项目中文件上传api

export default {
    name: "Editor",
    props: {
        value: {
            default: ""
        },
    },
    components: {
        VueEditor
    },
    data() {
        return {
            editorContent: "",
            customToolbar: []
        };
    },
    created() {
        this.editorContent = this.value;
    },
    methods: {
        textChange() {
            this.$emit("onchange", this.editorContent);
        },
        handleImageAdded: function(file,Editor,cursorLocation,resetUploader) {
            var formData = new FormData();
            formData.append("file", file);
            uploadUidFile(file).then(res=>{
                let url = res.data.data.originalPath;
                Editor.insertEmbed( cursorLocation,"image",this.$options.filters['filterUrl'](url));
                //this.$options.filters['filterUrl'](url))这个是将相对路径的图片地址前面拼上https之类的前缀从而可以预览,否则无法预览,这是全局过滤器的一种写法
                resetUploader();
            }).catch(err=>{
                console.log(err);
            })
        }
    },
    watch: {
        value(newVal) {
            this.editorContent = newVal;
        }
    }
};
</script>

2.项目中引入该组件并使用

<template>
	<vue2Editor v-model="form.introduce" @onchange="change"/>
</template>

<script>
import vue2Editor from "@/components/common/vue2Editor"
export default {
	methods:{
		change(txt){
	            this.$set(this.form,'introduce',txt)
	       },
	}
}

</script>

如果直接v-html 富文本编辑器编辑的内容,有些符号是解析不出来的,需要引入相关的css,添加class类,然后才能正常展示.

import 'quill/dist/quill.snow.css'