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

一、使用环境

Win7
Eclipse
jettty9
chrome

二、下载百度UEditor插件

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

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

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

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

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

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

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

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

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功能了，但是还要编写图片上传的处理代码

秒客网

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

相关文章