vue中使用 wangEditor （一）(只做配置图片上传部分的说明)

wangEditor 的文档

1. 安装依赖

	npm i wangeditor --save

2. 引入依赖

	import E from "wangeditor";	

3. 初始化设置

	// graphicDetails  是用来放置这个富文本的容器id
	initEditor(row){
            editor = new E("#graphicDetails");
            // 或者 const editor = new E( document.getElementById('div1') )
            editor.config.uploadImgHeaders = {
                token:localStorage.getItem('token')
            }
            // 配置接收这个文件的字段
            editor.config.uploadFileName = 'file'
            editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif']		
            // 这部分是我自己的项目做的配置，做了代理之后，这里要分别配置（有更好的方法欢迎留言）
            if(process.env.NODE_ENV == 'development'){
                editor.config.uploadImgServer = '/api/upload'
            }else{
            	// 如果使用了代理，这里最好填写完整的api地址
                editor.config.uploadImgServer = '/upload'
            }
            // editor.config.uploadImgServer = 'uploadUrl'
            editor.config.uploadImgHooks = {
                // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                customInsert: function(insertImgFn, result) {
                    // result 即服务端返回的接口
                    console.log('customInsert', result)

                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    insertImgFn(result.data.url)
                }
            }
            editor.create();
            
            // 如果是编辑，则渲染富文本的内容
            if(row){
                editor.txt.html(row.goodsDetail);
            }
        },

目前只使用到这部分的功能，后续有新的需要注意的配置会再更新