引入wangEditor或ueditor时工具栏部分无效问题

50 阅读 0 评论 33 点赞

我是靠谱客的博主怡然板凳，最近开发中收集的这篇文章主要介绍引入wangEditor或ueditor时工具栏部分无效问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天在引入富文本插件时当插件引入进来后部分功能失效，分别换了wangEditor和ueditor也没解决问题。

最终查到的问题出在VUE与插件加载顺序不对导致的

解决办法：

将初始化代码放到vue的mounted函数里面

var editor ;
mounted:function(){//插件使用的wangEditor，简单美观

        var E = window.wangEditor
        editor = new E('#editor-content')
        editor.customConfig.debug = true;
        editor.customConfig.uploadFileName = 'files'
//        editor.customConfig.uploadImgServer = WWW_URL+'/score/uploadDetailPic';
        editor.create();
},

另外，在使用wangEditor的时候需要指定uploadFileName，与后端的接收名称对应

@ApiOperation("上传商品图片")
@RequestMapping("/uploadDetailPic")
@ResponseBody
public String uploadDetailPic(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) {
JSONObject jsonObject = new JSONObject();
String[] data = new String[files.length];
//... 处理上传代码 ...//
jsonObject.put("errno",0);
jsonObject.put("data",data);
return jsonObject.toJSONString();
}

wangEditor固定的返回数据格式为：

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}