UEditor 富文本编辑器拓展之-----上传图片至项目之外或资源服务器

不念不忘少年蓝@ 2022-06-05 22:17 184阅读 0赞

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

这里主要是实现UEditor上传图片到项目之外(例如：资源服务器等)，将图片路径返回，下面是主要修改的代码。

ueditor.jsp

注意红色部分

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ueditor测试页面</title> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/plugins/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/plugins/ueditor/ueditor.all.js"> </script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/plugins/ueditor/lang/zh-cn/zh-cn.js"></script> </head> <body> <span style="color: red;"> 注：该页面实现富文本编辑器的功能，其中上传图片部分通过调用后台方法，先上传图片到别处(项目外或者资源服务器)，再返回到 </span> <div class="f_l" style="margin:35px 0 0 0"> <span class="th"><span style="color:red;">*</span>内容:</span> <span style="display:block;margin:-16px 0 0 62px"> <script id="editor" type="text/plain" style="width:740px;height:200px;"></script> </span> </div> <div data-options="region:'south',border:false" style="text-align:center;padding:10px 0 0;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="#" style="width:80px" οnclick="save()">提交</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" οnclick="close()" style="width:80px">关闭</a> </div> <script type="text/javascript"> function save(){ var arr = []; arr.push(UE.getEditor('editor').getContent()); var content = arr.join("\n"); if (content == null || content == '') { alert("内容不能为空"); return; } alert(content) } var ctx = "${pageContext.request.contextPath}"; //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); UE.Editor.prototype.getActionUrl=function(action){         if ((action == 'uploadimage')){             return ctx+'/do/infoManageControl/ueditorUploadImage';    /* 这里填上你自己的上传图片的action */         }else if (action == 'uploadvideo'){             return ctx+'/do/infoManageControl/ueditorUploadVideo';    /* 这里填上你自己的上传视频的action */         }else{             return this._bkGetActionUrl.call(this, action);         } }; </script> </body> </html>

上传图片的Action

UeditorControl.java

注：

String url = UploadAction.uploadSFTP(req, file);该方法就是实现上传图片到资源服务器，并返回该图片在资源服务器url，这里就不贴代码了。

package com.cn.control.ueditor;
    
    import java.util.HashMap;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    
    /** * @author  feifz: 
        * @date ：2017年10月19日 下午4:24:17 
        * @return  
    	* @desc
        */
    @Controller
    public class UeditorControl {
    	private static final Logger log = LoggerFactory.getLogger(UeditorControl.class);
    	
        @RequestMapping("/ueditorUploadImage")
    	@ResponseBody
        public Map<String,Object> save(HttpServletRequest req){
            Map<String,Object> rs = new HashMap<String, Object>();
            MultipartHttpServletRequest mReq  =  null;
            MultipartFile file = null;
            String fileName = "";
            // 原始文件名   UEDITOR创建页面元素时的alt和title属性
            String originalFileName = "";
            try {
                mReq = (MultipartHttpServletRequest)req;
                // 从config.json中取得上传文件的ID
                file = mReq.getFile("upfile");
                // 取得文件的原始文件名称
                fileName = file.getOriginalFilename();
                originalFileName = fileName;
                /*你的处理图片的代码*/
                //上传图片，返回全路径
                String url = UploadAction.uploadSFTP(req, file);
                rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
                rs.put("url",url);         //能访问到你现在图片的路径
    //            rs.put("url", "https://img-blog.csdn.net/20161116200623502");
                rs.put("title", originalFileName);
                rs.put("original", originalFileName);                       
            } catch (Exception e) {
                log.error(e.getMessage(),e);
                rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
                rs.put("url","");
                rs.put("title", "");
                rs.put("original", "");
            }
            return rs;
        }
    }

效果图：

![Center][]

html模式：

![Center 1][]

注意：由于修改了UEditor源生的上传图片的方法，我们在使用的时候会发现，当富文本编辑器里有我们上传的图片时，在下面选择从别的地方粘贴一段文字过来是，上面的代码就会消失。

原因：ueditor在粘贴内容的时候**会将目前编辑的所有内容中元素重新赋值非本地服务器链接的属性**

解决办法：(亲测可用)：在ueditor.config.js文件中添加如下代码即可：catchRemoteImageEnable: false

2017.12.1修改：

以上主要是讲得上传图片到资源服务器，发现在上传视频到资源服务器时，稍微有一点不一样

上传的方式，配置等跟上传图片差不多，只不过ActionName是uploadvideo，上传之后返回的json信息什么的要求跟上传图片差不多，以前只是随意从别人那copy过来，以为只要返回成功就行了，在参考别的博文时发现也是有讲究的。

下面介绍一下返回给UEditor的参数  
这里你应该参考http://fex.baidu.com/ueditor/\#dev-request\_specification  
官方文档里面的 后端请求参数-请求规范，  
官方有介绍了，返回参数的格式，格式中json的key就是对应了类ReturnUploadImage里面的属性。  
转换后格式应该是这样的，要严格按照文档上面的格式  
\{"original":"5dfcfea3e3b442bda3972053266c3bd3.jpg","state":"SUCCESS","title":"5dfcfea3e3b442bda3972053266c3bd3.jpg","url":"http://www.xxxxx321.com/mmmm/xxxModuleName/20150922/5dfcfea3e3b442bda3972053266c3bd3.jpg"\}  
注：不同的文件上传，返回的属性不一样  
=======================ReturnUploadImageStart============================================  
public classReturnUploadImage \{  
private String state;//上传状态SUCCESS 一定要大写  
private String url;//上传地址  
private String title;//图片名称demo.jpg  
private String original;//图片名称demo.jpg  
....getter & setter...  
\}  
=======================ReturnUploadImage End==============================================  
这里官方文档也说的很清楚，对应 config、uploadimage、uploadscrawl、uploadvideo、uploadfile....都有各自的格式

在上传完视频之后，查看富文本对应的html代码会发现上传的视频url丢失了，究其原因，通过查阅网络上资料发现有两种解释：

1.ueditor.config.js文件大概368行的位置，whitList这个白名单属性名字写错了，改为whiteList就可以了，本人亲测，确实是可以(ueditor用的版本是1.4.3.3)。

[Center]: /images/20220606/dc177309668246c79ae81528e74f649b.png
[Center 1]: /images/20220606/031c0b199f424c9c8839fa54ae6aa064.png