vue使用wangEditor编辑器上传图片

wangEditor富文本编辑器官网：wangeditor官网

1.安装wangEditor

npm install @wangeditor/editor-for-vue --save

2.引入组件

//局部引入
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


//vue中使用组件
components: { Editor, Toolbar },

data() {
        return {
            editor: null,
            html: '',
            editorConfig: { 
                placeholder: '请输入内容...',
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    //配置上传图片
					uploadImage: {
						customUpload: this.uploadImg
					}
				}
            },
            mode:"default"
        };
    },


//这里需要引入css样式
<style src="@wangeditor/editor/dist/css/style.css"></style>

3.使用editor组件

<Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />

4.配置自定义上传图片方法

//上传图片
        uploadImg(file, insertFn){
            let imgData = new FormData();
			imgData.append('file', file);
             //调用上传图片接口，上传图片  我这里testUpImg是测试接口
            testUpImg(imgData).then(response => {
                if(response.data.code == 0){
                    //插入后端返回的url
                    insertFn(response.data.data.url);
                }else{
                }
            })
        },

        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },

下面是完整代码 

<template>
<div>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>

        <el-button style="width:70px" type="primary" round @click="sendBlog()">提交</el-button>
        <el-button style="width:70px" @click="clearForm()" round>清空</el-button>


 
</div>
</template>

<script>
// npm 安装
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { testUpImg } from "@/api/blog/testApi.js";

export default {
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '',
            editorConfig: { 
                placeholder: '请输入内容...',
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    //配置上传图片
					uploadImage: {
						customUpload: this.uploadImg
					}
				}
            },
            mode:"default"
        };
    },
    created() {
    },
    methods: {
        sendBlog() {
            console.log(this.html);
        },

        //上传图片
        uploadImg(file, insertFn){
            let imgData = new FormData();
			imgData.append('file', file);
             //调接口，上传图片
            testUpImg(imgData).then(response => {
                if(response.data.code == 0){
                    insertFn(response.data.data.url);
                }else{
                }
            })
        },

        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        //清空
        clearForm(){
            this.html = '';
        },
    },
    mounted() {
        
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    
    
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>