富文本编辑器vue2-editor

1.使用 npm install vue2-editor --save 安装到项目中去。
2.在需要的页面中引入 import { VueEditor } from ‘vue2-editor’。

//引入富文本编译器
import { VueEditor } from 'vue2-editor';
export default {
    components: {
      VueEditor
    },

3.代码组件使用：

<el-row>
    <el-col :span="24">
      <el-form-item label="属性名称" style="margin-left:5px" >
         <div >
           <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="你绑定的属性(通常是对象.属性)"> </vue-editor>
         </div>
     </el-form-item>
    </el-col>
  </el-row>
js:
	handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
        var formData = new FormData();
        formData.append('file',file);//'file',这个是后台写的接受参数属性名，一定要保持一样
        axios({
          url: "图片上传的接口路径",
          method: "POST",
          data: formData,
          processData: false, //必须false才会自动加上正确的Content-Type
          contentType: false,//必须false才会避开jQuery对 formdata 的默认处理
        })
        .then(result => {
        //这个方法大家可以百度查一下，"image"意思当图片显示
          Editor.insertEmbed(cursorLocation,"image", "你的图片id(得是全路径，直接能访问到的)");
          resetUploader();
        })
      },
      
 java:
 	 public String fileUpload(HttpServletRequest request, HttpServletResponse response,
                             @RequestParam(value = "file") MultipartFile file)


代码解说：
useCustomImageHandler ：作用是图片不会转成base64格式，直接是标签形式。
@imageAdded="handleImageAdded": handleImageAdded方法名，绑定的是图片上传成功时候的操作，
							 我自己的项目是，把图片上传到七牛云，然后获取到图片的id供前台页面显示。
				             当useCustomImageHandler为true且正在将照片添加到编辑器时触发@imageAdded方法

备注：我就是因为和后台的参数名file没对应上，入了半天的坑。以上供大家参考。