umeditor使用小记

项目里需要文本编辑器，所以网上找了一个umeditor,功能较精简。中间遇到一些问题，现在记录一下。

一.页面中引入umeditor控件

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/umeditor1_2_2/third-party/jquery.min.js"></script>

<link href="${pageContext.request.contextPath}/resources/js/umeditor1_2_2/themes/default/css/umeditor.css" rel="stylesheet">

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/resources/js/umeditor1_2_2/umeditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/resources/js/umeditor1_2_2/umeditor.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/umeditor1_2_2/lang/zh-cn/zh-cn.js"></script>

<div id="myEditor" style="width:1000px;height:500px;"></div>

$(function(){

//实例化编辑器

var um = UM.getEditor('myEditor');

um.focus();

um.execCommand('forecolor','#000');

um.setContent('${content}',false); //设置编辑器内容，false：不追加

});

二.修改配置文件

1.umeditor.config.js:

//为编辑器实例添加一个路径，这个不能被注释

UMEDITOR_HOME_URL : URL

//图片上传配置区

,imageUrl:"/boss/common/file/uploadWebPop"             //图片上传提交地址

,imagePath:URL                    //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

,imageFieldName:"file"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

图片服务器接口定于如下：

@RequestMapping(value = "uploadWebPop", method = RequestMethod.POST)

public @ResponseBody

Object uploadWebPop(String resType, boolean createMulti,boolean createIcon, boolean retain,@RequestParam("upfile") MultipartFil file)

注：requestParam必须是upfile才能触发接口，不知道为什么。

2,image.js:

uploadComplete: function(r){

        var me = this;

         try{

         r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', "").replace("</pre>", ""); //需加这一句，应该是umeditor bug

                var json = eval('('+r+')');

                var _json = json.file;  //根据接口返回的json修改此处。

                Base.callback(me.editor, me.dialog, _json, "S00000");

            }catch (e){

                var lang = me.editor.getLang('image');

                Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');

            }

        },

callback: function (editor, $w, json, state) {

            if (state == "S00000") {

                //显示图片计数+1

                Upload.showCount++;

                var $img = $("<img src='" + json.url + "' class='edui-image-pic' />"),

                    $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);

三.文章上传后，点击编辑会因为换行，引号等使页面出现错误，显示不出来。此时在后台做一下过滤。

content = webPop.getContent();

if (content!=null) {

            Pattern p = Pattern.compile("\r\n"); //过滤掉回车

            Matcher m = p.matcher(content);

            content = m.replaceAll("");

        }

if (content!=null) {

            Pattern p = Pattern.compile("\\'"); //过滤掉但引号。正则里\\'表示单引号。\\\\'表示\'

            Matcher m = p.matcher(content);

            content = m.replaceAll("\\\\'");

        }