百度ueditor的使用

　　一个文本编辑器，看了网上很多文档写的很乱，这里拾人牙慧，整理下怎么使用。

这个东西如果不涉及到图片附件上传，其实很简单，就是几个前端文件，直接引用，然后配置下ueditor.config.js即可。这里就不多说。

至于图片上传，ueditor 设计的时候是考虑和后端交互的，所以会看到可以下载什么php，java版本，还有很多网上会说道有什么后端配置文件，改那改这的，但是实际上后端存储业务是按照公司实际来的，实践起来并不顺利。

本文重点讲述的只用前端文件和ueditor.all.js、ueditor.config.js，如果来实践和后端交互，图片上传。

(步骤1)下载文件，文件目录如下，图中的php （java、net）删掉，我们不需要提供的后端文件。主要会调整到ueditor.all.js,ueditor.config.js

(步骤2) 然后参考官网 在页面放如下的html和js引用，如下。这是页面就能显示编辑器了，工具栏的内容在ueditor.config.js的toolbars配置。

<!DOCTYPE HTML> <html lang="en-US"> 
<head> <meta charset="UTF-8">
　　<title>ueditor demo</title>
</head> 
<body> <!-- 加载编辑器的容器 --> 
<script id="container" name="content" type="text/plain"> 这里写你的初始化内容 </script> <!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> 
<script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> 
<script type="text/javascript"> var ue = UE.getEditor('container'); </script> </body> </html>

保存和修改，就通过js获取编辑器的内容，再ajax请求或form表单了。

//获取html内容，返回: <p>hello</p> 

var html = ue.getContent();

var html = ue.setContent(); 

//获取纯文本内容，返回: hello

var txt = ue.getContentTxt();

(步骤3) 后端交互（重点）

　　到这里，如果还想图片文件上传，就会遇到一个问题，浏览器会报错，显示ueditor 后端配置项没有正常加载,上传插件不能正常使用。这个是因为ueditor加载后，会去请求后端，拿后端的配置项。

　　我们还没处理后端逻辑，自然会报错。

　　ueditor给我们提供了一个请求URL配置，唯一和后端交互的地址，所有向后端的请求只有这个。就是ueditor.config.js里面的serverUrl。

　　但是如果我们有多个请求action事务呢，ueditor本身的设计是我们可以通过 http：//serverUrl?action=actionA/actiongB. 在后端自己去分发action，上面的加载后端配置，请求就是=//serverUrl?action=config。

　　我们按照这个思路来写后端，也可以在前端转发请求给不同的后端接口。下面讲下这2种如何实现

1、通过唯一serverUrl接口，在后端分发aciton

先在ueditor.config.js配置下面参数

serverUrl：/ueditorEdit/eventHandler //唯一和后端交互的接口地址

imageActionName: /uploadimage //配置上传图片的action，没有配置的话，有默认值uploadimage

在后端函数eventHandler里，根据request的action参数做分发。

组件默认有哪些action，具体action的情况可以参考ueditor.all.js源码 8006行，源码如下

/**

         * 根据action名称获取请求的路径

         * @method  getActionUrl

         * @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径

         * @param { String } action action名称

         * @example

         * ```javascript

         * editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"

         * editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"

         * editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"

         * editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"

         * ```

         */

        getActionUrl: function(action){

            var actionName = this.getOpt(action) || action,

                imageUrl = this.getOpt('imageUrl'),

                serverUrl = this.getOpt('serverUrl');

            if(!serverUrl && imageUrl) {

                serverUrl = imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2');

            }

            if(serverUrl) {

                serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?':'&') + 'action=' + (actionName || '');

                return utils.formatUrl(serverUrl);

            } else {

                return '';

            }

        }

　　在后端eventHandler，接收到请求的aciton=config 时，就是获取后端配置。由于我们并没有使用后端配置，所以这里返回了 {state：”配置文件初始化失败“}，如下图，这样改就能解决前端报后端配置项没有正常加载的问题。当然这里你可以自己封装返回结果（基本各自的框架都会对结果进行封装），只要前端相应修改。java后端代码如下

@RequestMapping("/eventHandler")

public void eventHandler(HttpServletRequest request, HttpServletResponse response) throws IOException {

　　//action==config加载后端配置处理

　　if(request.getParameter("action").equals("config")){

　　　　request.setCharacterEncoding( "utf-8" );

　　　　response.setHeader("Content-Type" , "text/html");

　　

　　　　// 返回 {state: "配置文件初始化失败"}

　　　　//这里没有用ueditor的后端jar和后端配置，上传的接口都是另外写的。只需ueditor的前端文件即可

　　　　//如果要使用ueditor的后端配置，需要把后端配置文件放到tomcat的根目录或者指定目录

　　　　// 加载后端配置文件的js是ueditor.all.js的UE.Editor.prototype.loadServerConfig，可以直接在前端禁掉js加载后端配置的请求

　　　　response.getWriter().write("{\"state\": \"\\u914d\\u7f6e\\u6587\\u4ef6\\u521d\\u59cb\\u5316\\u5931\\u8d25\"}");

　　}

}

返回后，ueditor前端怎么处理呢，可以看下在ueditor.all.js 8088行的源码，如下。

       configUrl && UE.ajax.request(configUrl,{

                    'method': 'GET',

                    'dataType': isJsonp ? 'jsonp':'',

                    'onsuccess':function(r){

                        try {

                            var config = isJsonp ? r:eval("("+r.responseText+")");

                            utils.extend(me.options, config);

                            me.fireEvent('serverConfigLoaded');

                            me._serverConfigLoaded = true;

                        } catch (e) {

                            showErrorMsg(me.getLang('loadconfigFormatError'));

                        }

                    },

                    'onerror':function(){

                        showErrorMsg(me.getLang('loadconfigHttpError'));

                    }

                });

解决完配置加载问题后，至于图片上传，就在eventHandler里面判断action=uploadimage 里面自己去处理上传逻辑，前端返回处理在ueditor.all.js 的24520，根据自己返回的结果调整下js脚本，如下，调整过的脚本

try{

                        var link, json, loader,

                            body = (iframe.contentDocument || iframe.contentWindow.document).body,

                            result = body.innerText || body.textContent || '';

                        json = (new Function("return " + result))();

                        //link = me.options.imageUrlPrefix + json.url;

                        //if(json.state == 'SUCCESS' && json.url) {

                        //    loader = me.document.getElementById(loadingId);

                        //    loader.setAttribute('src', link);

                        //    loader.setAttribute('_src', link);

                        //    loader.setAttribute('title', json.title || '');

                        //    loader.setAttribute('alt', json.original || '');

                        //    loader.removeAttribute('id');

                        //    domUtils.removeClasses(loader, 'loadingclass');

                        //} else {

                        //    showErrorLoader && showErrorLoader(json.state);

                        //}

                        if(json.success && json.result){

                            loader = me.document.getElementById(loadingId);

                            loader.setAttribute('src', json.result);

                            loader.setAttribute('_src', json.result);

                            loader.setAttribute('title', json.title || '');

                            loader.setAttribute('alt', json.original || '');

                            loader.removeAttribute('id');

                            domUtils.removeClasses(loader, 'loadingclass');

                        }else{

                            showErrorLoader && showErrorLoader(json.success);

                        }

                    }catch(er){

                        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));

                    }

2、通过不同的接口对应不同的action

ueditor.config.js配置如下

serverUrl: "/xxx/loadConfig" //加载配置，后端返回失败

imageActionName:"/xxx/uploadImage" //上传图片，前端转发

然后我们把唯一的接口serverUrl当成加载配置的接口，上面的代码中就不需要判断action=config了，直接返回{state：”配置文件初始化失败“}，即可。

@RequestMapping("/eventHandler")

public void eventHandler(HttpServletRequest request, HttpServletResponse response) throws IOException {

　　request.setCharacterEncoding( "utf-8" );

　　response.setHeader("Content-Type" , "text/html");

　　response.getWriter().write("{\"state\": \"\\u914d\\u7f6e\\u6587\\u4ef6\\u521d\\u59cb\\u5316\\u5931\\u8d25\"}");

}

最后在前端转发图片上传接口，在我们引用ueditor组件的前端页面上，重写UE.Editor.prototype.getActionUrl 函数，函数源码在ueditor.all.js，可以自己去看. 重写转发如下，如果action=/xxx/uploadImage，直接请求/xxx/uploadImage

<script>

var ue = UE.getEditor('editor');

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl =function(action){

//如果ation =图片上传，直接调用图片上传的接口

if(action == '/xxx/uploadImage'){

　　return '/xxx/uploadImage';

}else {

　　return this._bkGetActionUrl.call(this,action);

}

};

</script>

这样图片上传就会直接调用/xxx/uploadImage接口，而不影响serverUrl配置，图片上传后返回，也是在ueditor.all.js 的24525行进行调整。

总结，这篇文章重在说明前后端交互调整的思路，具体如何实现，要按照自己的实际情况来使用。后端具体的存储业务看各自的处理方式，但是我们要做的就是保存物理文件，拿回物理文件的地址。

百度ueditor的图片上传，前后端交互使用的更多相关文章

  1. 百度Ueditor多图片上传控件

    发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面 ...

  2. layUI框架中文件上传前后端交互及遇到的相关问题

    下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

  3. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）

    https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...

  9. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

随机推荐

  1. Windows硬链接 软链接 符号链接 快捷方式

    http://blog.nsfocus.net/shortcuthard-linkjunction-pointsymbolic-link/ Windows支持4种”链接”机制,分别是shortcut. ...

  2. KongCLI参考

    Introduction Kong提供的CLI(Command Line Interface)允许您启动.停止和管理Kong实例.CLI管理您的本地节点(如当前机器上的本地节点). If you ha ...

  3. 2018-2019-2 20165312《网络攻防技术》Exp2 后门原理与实践

    2018-2019-2 20165312<网络攻防技术>Exp2 后门原理与实践 课上知识点梳理总结 1.后门的概述 后门是指不经过正常认证流程而访问系统的通道 两个关键词:未认证.隐通道 ...

  4. 使用Fiddler 4 调用WebService

    Fiddler让我们这些.neter感到非常欣慰, 是用C#写出来的,它包含一个简单却功能强大的基于JScript .NET 事件脚本子系统,它的灵活性非常棒,可以支持众多的http调试任务,并且能够 ...

  5. dis集群研究和实践（基于redis 3.0.5） 《转载》

    https://www.cnblogs.com/wxd0108/p/5798498.html 前言 redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用.现在的 ...

  6. Oracle中 to_date和to_char用法

    to_date("要转换的字符串","转换的格式")   两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. to_char(日期,& ...

  7. react基础学习 三

    获取原生的DOM 注意:获取DOM是要在组件渲染之后才能被获取,所以在constructor里面获取不到原生的DOM 方法一:回调函数   推荐 方法二:createRef()   16版本,推荐 方 ...

  8. 003.[python学习] 简单抓取豆瓣网电影信息程序

    声明:本程序仅用于学习爬网页数据,不可用于其它用途. 本程序仍有很多不足之处,请读者不吝赐教. 依赖:本程序依赖BeautifulSoup4和lxml,如需正确运行,请先安装.下面是代码: #!/us ...

  9. 利用jvisualvm使用btrace进行线上调试案例

    用途:btrace主要用于线上调试.通过btrace,可在不改动代码的前提下,方便的发现以下问题: 1.定位性能慢的接口服务: 2.实时打印堆栈信息,定位死锁位置: 3.定位占用大量内存空间的代码块: ...

  10. 代码：PC CSS（工作中用）

    常规内容区域的:标题和文字 2016-5-23 .p16{font-size:16px;color:#333;}/* 16号#333的标题 */ .p12-gray{font-size:16px;co ...