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

        }

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cg3410/article/details/51728223

富文本UMeditor的使用

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

umeditor简洁富文本使用

一:引入umeditor对应的类库 二:创建对应的编辑器html区域,进行初始化设置等 UM.delEditor("headerTitleTi...
  • q646926099
  • q646926099
  • 2017-08-07 17:46:44
  • 681

百度编辑器umeditor使用总结

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

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

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

umeditor、ueditor的使用

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

Springmvc和umeditor整合

  • 2015年08月14日 11:25
  • 10.36MB
  • 下载

百度umeditor的使用

①HTML代码: ②引入umeditor相关资源文件 ③实例化并穿入相关参数(自定义) UM.getEditor('content', { initialFra...
  • lingchen__
  • lingchen__
  • 2017-04-06 21:09:47
  • 178

baidu编辑器 ueditor umeditor demo实例源码

  • 2014年11月07日 08:34
  • 21.3MB
  • 下载

UMEDITOR 操作, 销毁后重新创建

UMEDITOR 完整demo                                     h1{             font-family: "微软...
  • jy10521
  • jy10521
  • 2015-04-24 23:44:35
  • 762

富文本编辑器UMeditor在backbone中的使用

UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的ifr...
  • hayleyxia
  • hayleyxia
  • 2015-08-27 19:45:33
  • 905
收藏助手
不良信息举报
您举报文章:umeditor使用小记
举报原因:
原因补充:

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