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

最新推荐文章于 2025-06-10 14:35:33 发布

哎呦叔叔

最新推荐文章于 2025-06-10 14:35:33 发布

阅读量6.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：问题记录文章标签：富文本编辑器 wangEditor UEditor

本文链接：https://blog.csdn.net/qq_38392422/article/details/82764354

今天在引入富文本插件时当插件引入进来后部分功能失效，分别换了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 jsonObj