umeditor使用小记

原创 2016年06月21日 16:17:52

项目里需要文本编辑器,所以网上找了一个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("\\\\'");

        }

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

富文本UMeditor的使用

下载地址:http://ueditor.baidu.com/website/download.html#mini 一、前端配置 1、将下载的压缩包解压 2、将文件复制到项目webapp(webr...
  • tao_ssh
  • tao_ssh
  • 2017年03月29日 15:16
  • 363

umeditor简洁富文本使用

一:引入umeditor对应的类库 二:创建对应的编辑器html区域,进行初始化设置等 UM.delEditor("headerTitleTi...

umeditor、ueditor的使用

umeditor就是ueditor mini ,及ueditor的简化版本。 在官网的下载页面,可以知道,umeditor已经很久没更新了。 我一开始选的是umeditor,发现BUG一堆。首先是图片...

百度富文本ueditor和umeditor遇到的问题和解决办法

项目中要用到发布文章,所以选了百度的富文本;记录一下自己走的坑。 开始使用的是umeditor,它属于轻量级,功能比较少,有点是加载快,貌似只有183k吧。 umeditor用起来还是比较简单,具...

百度编辑器umeditor使用总结

百度编辑器是一个功能很全、很强大。 百度单张图片上传智能存储在项目下面,而不能独立自定义存储位置,因此重写上传代码 百度文章中的图片是通过base64实现的,直接存储在数据库中 tomcat通过虚拟...

使用ueditor时发现的bug

使用ueditor.all.min.js时,点击加下划线会报错。ueditor.all.js无此问题。 UE.utils.each(d,function(d,e)){c[b].indexOf(e)改...

百度ueditor1.4.3几个bug修复

1.多图在线管理无法显示图片: 下载ueditor源码包,将jsp/src下的源码拷贝到web工程目录的src目录下,修改FileManger.java中的getPath(file)方法: pri...

二.百度UEditor编辑器之配置文件:ueditor.config.js

百度UEditor编辑器之配置文件:ueditor.config.js,可以在这里配置整个编辑器的特性。...
  • rzg813
  • rzg813
  • 2014年04月09日 15:22
  • 9300

ueditor使用配置总结

项目中使用了ueditor编辑器,刚开始的时候真的是一头雾水,不过后来总算是能够将ueditor整合到项目中了,现在把自己的配置过程记录一下: 一、首先得让编辑器能够在页面上显示出来,这个在官方文档...

UEditor 报错:Uncaught ReferenceError: UE is not defined; Uncaught ReferenceError: UM is not defined

Uncaught ReferenceError: UE is not definedUncaught ReferenceError: UM is not defined百度的富文本编辑器Ueditor...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:umeditor使用小记
举报原因:
原因补充:

(最多只允许输入30个字)