码迷,mamicode.com
首页 > Web开发 > 详细

百度ueditor的图片上传,前后端交互使用

时间:2019-01-30 11:15:01      阅读:4084      评论:0      收藏:0      [点我收藏+]

标签:实现   版本   哪些   muti   官网   window   adc   ajax   --   

百度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的图片上传,前后端交互使用

标签:实现   版本   哪些   muti   官网   window   adc   ajax   --   

原文地址:https://www.cnblogs.com/shezhe/p/10336978.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!