angular.js+springBoot使用umeditor编辑器

一：下载umeditor

1. 链接地址https://pan.baidu.com/s/1hB3dIdDvhTTCfs9skHRr0g
2. jcit
3. 放入项目中

 

二：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>";       }    }

 

五：问题总结

1. 设置编辑器格式之后可编辑区域还是比较小

um.setWidth("100%");

 

1. 解决办法

var um = UM.getEditor('myEditor');            um.setWidth("100%");            $(".edui-body-container").css("width", "98%");