Ueditor 相关资料
Ueditor 官网:https://ueditor.baidu.com
Ueditor 文档:http://fex.baidu.com/ueditor/
参考文章 | 参考链接 |
---|---|
UEditor | https://www.jianshu.com/p/806bc21e86af |
Tops:如果发现有好的Ueditor相关问题处理的文章,请帮忙留言附上链接,后面会放到这里来供后来的用户方便参考。
Ueditor 整合上传图片实现步骤
- 根据官网的文档代码案例,引用Ueditor并实例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
- 写服务器后台上传图片的方法,参数变量名必须是file与前端变量名对应
/**
* 后台上传图片方法
*/
@RequestMapping(value = "/goodsdImageUpload",method = RequestMethod.POST)
@ResponseBody
public OperateResult<String> goodsdImageUpload(@RequestParam("file") MultipartFile file) throws IOException {
- 修改前端方法,从前端配置获取上传文件参数,不从后台获取
- 把config.json的上传图片的参数移到ueditor.config.js中,如果需要实现涂鸦和其他功能,也可以一并移过来,然后参考上传图片方法实现;然后注释ueditor.all.js的setTimeout方法,实现是把后台获取上传图片相关参数放到前端获取。(原因:官网是从后台获取这个config.json配置参数,个人感觉没必要)
- 最后修改相关上传图片配置参数,如上传图片地址,上传文件名,和访问名
- 修改上传图片后台接口返回值参数与前端ueditor.all.js中callback函数解析参数一致,修改源码;也可以不修改,后台接口返回值参考ueditor解析格式。
- 重写图片上传地址,然后就可以测试上传图片功能了