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%");

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值