vue使用WangEditor富文本编辑器(批量上传图片到服务器)

最近要写一个官网，但是这个官网要写成活的可配置的项目，于是要先写一后台管理系统，用来配置官网的菜单和页面，配置菜单自然是vue+ElementUI表格表单的增删改查，但是配置页面就要有排版、样式等等，所以想到了富文本，查了一下决定使用WangEditor这个富文本编辑器，轻量级方便上手，功能齐全:

官网：http://www.wangEditor.com
文档：http://www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：http://github.com/wangfupeng1988/wangEditor

首先下载：

npm install wangeditor --save

然后在src文件夹下新建组件文件：

然后在父组件中引入使用：

接收字段：

使用：

changeEditor1事件：

changeEditor1 (res) {
  console.log(res)        // 这个res就是实时输入的富文本的内容，打印出来是实时输入的字符串html
},

这个editoritem.vue文件内容如下：

到这里就完了，创建成功，这里的难点就是上传图片的路径配置，摸索了一阵，如果你上传的图片是base64格式，也就是this.editor.customConfig.uploadImgShowBase64 = true，就没这么多麻烦，去掉配置上传路径这些代码，就ok了，但是这个是有弊端的，比如你的图片很多，很大，那你想想，这代码多长，所以还是用file文件格式比较靠谱一些。

官网github上有vue的demo，直接下载下来就可以用，多看看文档。