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
  • 849

umeditor、ueditor的使用

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

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

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

百度编辑器umeditor使用总结

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

umeditor简洁富文本使用

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

UMeditor百度富文本编辑器的使用

API地址 http://fex.baidu.com/ueditor/#server-jsp 用起来感觉很简单,主要配置什么的就不多说了,就把环境,这里主要是讲解下我怎么搭的环境,还有常用的ToolB...
  • qq873113580
  • qq873113580
  • 2015年08月23日 15:09
  • 982

百度编辑器ueditor的简单使用

最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器。以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的。     其实看ueditor功能很强大,不过百...
  • xiaoxian8023
  • xiaoxian8023
  • 2014年06月29日 17:17
  • 82237

百度富文本编辑器 UMeditor

  • 2014年07月15日 14:22
  • 5.11MB
  • 下载

百度UEditor编辑器使用教程与使用方法

我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器。关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享...
  • liuxuekai
  • liuxuekai
  • 2016年07月23日 17:51
  • 13654

UEditor入门(一)集成进Java Web项目

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

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