富文本编辑器——百度UEditor插件安装教程

一、使用环境

• Win7
• Eclipse
• jettty9
• chrome

二、下载百度UEditor插件

1、下载地址：http://ueditor.baidu.com/website/download.html

2、这里下载的版本是[1.4.3.3 Jsp版本]

3、将下载好的文件包放在工程目录中

4、修改ueditor/ueditor.config.js 里的务器统一请求接口路径

注：这个请求路径是请求服务器得到配置信息，所以需要在服务器中配置这个配置信息

5、编写配置信息代码

Ueditor 官方例子是直接返回一个json文件，此处为了方便直接返回一个json对象

    @RequestMapping(value = "config")
    @ResponseBody
    public JSONObject config(String action, @RequestParam(required = false) String callback, @RequestParam(required = false) String encode,
            HttpServletRequest request) throws Exception {
        JSONObject jsonObject = new JSONObject();
        jsonObject = getConfig();
        // action参数为getConfig中的jsonObject.put("imageActionName", "uploadimage");
        if (action.equals("uploadimage")) {
            // 此处返回上传后的图片路径，json格式为{["url":"http://xinrui.com/image/1.png","state":"SUCCESS"]}
            jsonObject = imgcompressService.ueEditorUpload(request);
        }
        return jsonObject;
    }

    public JSONObject getConfig() {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("imageActionName", "uploadimage"); // 执行上传图片的action名称
        jsonObject.put("imageAllowFiles", new String[] { ".png", ".jpg", ".jpeg", ".gif", ".bmp" }); // 允许上传的图片类型
        jsonObject.put("imageFieldName", "upfile"); // 提交的图片表单名称
        jsonObject.put("imageMaxSize", "2048000"); // 上传大小限制，单位B
        jsonObject.put("imageCompressEnable", true); // 是否压缩图片,默认是true
        jsonObject.put("imageCompressBorder", 1600); // 图片压缩最长边限制
        jsonObject.put("imageInsertAlign", "none"); // 插入的图片浮动方式
        jsonObject.put("imageUrlPrefix", "http://xinrui.com/image/"); // 图片访问路径前缀
        jsonObject.put("imagePathFormat", "/{yyyy}{mm}{dd}/{time}{rand:6}"); // 上传保存路径,可以自定义保存路径和文件名格式
        return jsonObject;
    }

6、前端调用

（1）在相应页面引入js

   <script type="text/javascript" src="plugin/ueditor/ueditor.config.js"></script>
   <script type="text/javascript" src="plugin/ueditor/ueditor.all.min.js"></script>

  <div class="form-group">
        <label class="col-sm-1 control-label">富文本描述：</label>
         <div class="col-md-9">
             <script id="container" type="text/plain"></script>
         </div>
  </div>

（2） js调用

<script>
     makeUeEditor('container');
     function makeUeEditor (id) {
          UE.delEditor(id);
          var ue = UE.getEditor(id, {
            autoHeight: false,
            wordCount: false,
           });
             return ue;
          },
     function setUeEditor (id, data) {  // 填充富文本
          var ue = UE.getEditor(id);
          ue.addListener("ready", function () {
             ue.setContent(data);
          });
      },
</script>

7、至此，已经可以使用简单的UEditor功能了，但是还要编写图片上传的处理代码