一:下载umeditor
- 链接地址https://pan.baidu.com/s/1hB3dIdDvhTTCfs9skHRr0g
- jcit
- 放入项目中
二:index.html引入
1.引入样式
<!—umeditor样式--> <link href="vendor/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
|
2.引入js
<script type="text/javascript" charset="utf-8" src="vendor/umeditor/umeditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="vendor/umeditor/umeditor.js"></script> <script type="text/javascript" src="vendor/umeditor/lang/zh-cn/zh-cn.js"></script> |
三:使用umeditor
1. js中初始化um
var um = UM.getEditor('myEditor'); $scope.$on('$destroy', function() { um.destroy(); }); |
2.页面引入
<div class="form-group"> <label class="col-lg-2 col-sm-3 control-label" for="account"> <span class="text-danger wrapper-sm">*</span>内容</label> <div class="col-sm-6"> <div class="editor_container"> <script type="text/plain" id="myEditor"> </script> </div> </div> </div> |
3.获取um中的值
$scope.record.info = um.getContent(); |
四:使用um实现文件上传
1.配置um.config路径
//图片上传配置区 , imageUrl: "fileUpload/imageUp" //图片上传提交地址 |
2.后台引入commons-fileupload包
@ResponseBody @RequestMapping("imageUp") public String imageUp(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response, org.springframework.ui.Model modelMap) {
Uploader up = new Uploader(request); up.setSavePath("upload"); String[] fileType = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; up.setAllowFiles(fileType); up.setMaxSize(10000); // 单位KB try { up.upload(upfile); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } String result = "{\"name\":\"" + up.getFileName() + "\", \"originalName\": \"" + up.getOriginalName() + "\", \"size\": " + up.getSize() + ", \"state\": \"" + up.getState() + "\", \"type\": \"" + up.getType() + "\", \"url\": \"" + up.getUrl() + "\"}";
result = result.replaceAll("\\\\", "\\\\");
if (callback == null) { return result; } else { return "<script>" + callback + "(" + result + ")</script>"; } } |
五:问题总结
- 设置编辑器格式之后可编辑区域还是比较小
um.setWidth("100%"); |
- 解决办法
var um = UM.getEditor('myEditor'); um.setWidth("100%"); $(".edui-body-container").css("width", "98%"); |