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("\\\\'");

        }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值