参考文章:
1、vue集成ueditor的注意事项
2、在Vue2.0中集成UEditor 富文本编辑器
3、vue 集成 UEditor 富文本编辑器
4、UEditor文档
5、ueditor 后端配置项没有正常加载,上传插件不能正常使用!jsp版本
实际Vue2.0项目解决方案
1、按这篇文章完成基础集成
2、上文说到的,在ueditor.config.js中,对serverUrl进行配置:
// 服务器统一请求接口路径
,serverUrl: ``'[http://172.16.254.49:83/File/UEditor](http://172.16.254.49:83/File/UEditor)'` `//地址管你们后端要去`
-
具体需要后台提供两个接口
-
接口条件:
1)API名称相同的GET与POST两个接口;
2)其中GET接口需要后台返回数据内容如下:/* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片的action名称;任意字符串即可,但不能为空*/ "imageFieldName": "upfile", /* 提交的图片表单名称 ;与后台上传图片的POST接口所需参数名称一致*/ "imageMaxSize": 2048000, /* 上传大小限制,单位B */ "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ "imageCompressEnable": true, /* 是否压缩图片,默认是true */ "imageCompressBorder": 1600, /* 图片压缩最长边限制 */ "imageInsertAlign": "none", /* 插入的图片浮动方式 */ "imageUrlPrefix": "", /* 图片访问路径前缀 */ "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ }
注意:后台GET请求需要配置jsonp跨域内容
3)其中POST接口需要跟后台沟通好,一般需要配置两个参数:
一般需要返回两个值: { state: "SUCCESS", url: "http://123.123.123:8080/image/url" }
3、前端需要做的工作
-
后台上传成功图片未展示到ueditor可视区域时,
需要检查image.js文件; 搜索“if (json.state == 'SUCCESS') {” 这里是后台返回值赋值前端的地方 看字段名称是否一致;
-
图片展示为裂图时
查看image.js 搜索“getInsertList: function () {” 查看“prefix = editor.getOpt('imageUrlPrefix');” 可能是因为添加了图片前缀导致的图片加载失败,可改为“prefix = '';”
网友评论