Ueditor是一个富文本编辑器，富文本编辑器的功能就是，你在编辑器里编辑后提交的内容，是有格式的 ，因为内容是一串HTML标签语言，当然你也可以自定义提交的内容。找了好多富文本编辑器，最终选了百度的，因为他功能多，虽然界面丑一点，不像开源中国的富文本编辑器这么好看，但是功能比开源中国的编辑器多多了。

参考：

一、前端实现

下载源码：

        下载jsp的那个，然后把目录下的文件复制到你的项目里，这样的话后面使用的时候，引用的文件就不会报404错误了。

        实例化编辑器的时候，有很多属性，都是Ueditor的前端配置项，还有toolbars属性，是Ueditor的自定义菜单，就是编辑器的那些功能按钮，这里的代码不是最全的功能，最全的前端配置项属性请参考文档：，需要注意的是使用上传功能需要配置serverUrl属性，是服务器统一接口请求路径，具体的功能后面再说。

页面代码：

    
    
    
    
    
    
    
     
        
      
            
       
                
        
发布新闻
            
       
        
      
				
      获得内容		
      提交新闻				
      
			
       
				
        
(图片格式: *.png, *.jpg, *.jpeg, *.gif, *.bmp; 大小限制: 5MB)
				
        
(视频格式: *.mp4; 大小限制: 100MB)
				
        				
        
			
       
		
      
		    
     
    
#parse("/views/common/footer.vm")

页面效果是这样的：

二、后台实现

        上文提到的serverUrl属性，你后台就要给对应一个方法匹配给他，GET和POST请求都有，这里的话我就做了最简单的功能，单图上传和单视频上传，后台也不难的，只要你的格式对了，就没有问题。

        首先，你要读取配置文件，传给前端，配置文件就是他的config.json文件，里面是一些功能的配置，你可以修改的，我就是修改了单图上传和单视频上传，他的注释写得很清晰，我自己也写了注释，就不过多描述了。

配置文件：

/* 前后端通信相关的配置,注释只允许使用多行方式 */{    /* 上传图片配置项 */    "imageActionName": "uploadimage", /* 传给后台的action参数值 */    "imageFieldName": "upfile", /* 提交的图片表单名称 */    "imageMaxSize": 5242880, /* 上传大小限制: 5MB, 单位B */    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */    "imageCompressEnable": false, /* 是否压缩图片,默认是true */    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */    "imageInsertAlign": "none", /* 插入的图片浮动方式 */    "imageUrlPrefix": "", /* 图片访问路径前缀 */    "imagePathFormat": "/static/ueditor/tmpUpFile/image/{yyyy}{mm}{dd}_{time}_{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */    							/* 最后一个'/'后是文件名, 如: 20170914_1505357381_821359.jpg */                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */                                /* {time} 会替换成时间戳 */                                /* {yyyy} 会替换成四位年份 */                                /* {yy} 会替换成两位年份 */                                /* {mm} 会替换成两位月份 */                                /* {dd} 会替换成两位日期 */                                /* {hh} 会替换成两位小时 */                                /* {ii} 会替换成两位分钟 */                                /* {ss} 会替换成两位秒 */                                /* 非法字符 \ : * ? " < > | */                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename *//*=====读取字节流时若为空中断读取分割线=====*/    /* 涂鸦图片上传配置项 */    "scrawlActionName": "uploadscrawl", /* 传给后台的action参数值 */    "scrawlFieldName": "upfile", /* 提交的图片表单名称 */    "scrawlPathFormat": "/static/ueditor/tmpUpFile/scrawl/{yyyy}{mm}{dd}_{time}_{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */    "scrawlMaxSize": 5242880, /* 上传大小限制: 5MB, 单位B */    "scrawlUrlPrefix": "", /* 图片访问路径前缀 */    "scrawlInsertAlign": "none",/*=====读取字节流时若为空中断读取分割线=====*/    /* 截图工具上传 */    "snapscreenActionName": "uploadimage", /* 传给后台的action参数值 */    "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */    "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */    "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 *//*=====读取字节流时若为空中断读取分割线=====*/    /* 抓取远程图片配置 */    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],    "catcherActionName": "catchimage", /* 传给后台的action参数值 */    "catcherFieldName": "source", /* 提交的图片列表表单名称 */    "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */    "catcherUrlPrefix": "", /* 图片访问路径前缀 */    "catcherMaxSize": 2048000, /* 上传大小限制，单位B */    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 *//*=====读取字节流时若为空中断读取分割线=====*/    /* 上传视频配置 */    "videoActionName": "uploadvideo", /* 传给后台的action参数值 */    "videoFieldName": "upfile", /* 提交的视频表单名称 */    "videoPathFormat": "/static/ueditor/tmpUpFile/video/{yyyy}{mm}{dd}_{time}_{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */    "videoUrlPrefix": "", /* 视频访问路径前缀 */    "videoMaxSize": 104857600, /* 上传大小限制: 100MB, 单位B */    "videoAllowFiles": [".mp4"], /* 上传视频格式显示 *//*=====读取字节流时若为空中断读取分割线=====*/    /* 上传文件配置 */    "fileActionName": "uploadfile", /* 传给后台的action参数值 */    "fileFieldName": "upfile", /* 提交的文件表单名称 */    "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */    "fileUrlPrefix": "", /* 文件访问路径前缀 */    "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */    "fileAllowFiles": [        ".png", ".jpg", ".jpeg", ".gif", ".bmp",        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"    ], /* 上传文件格式显示 *//*=====读取字节流时若为空中断读取分割线=====*/    /* 列出指定目录下的图片 */    "imageManagerActionName": "listimage", /* 传给后台的action参数值 */    "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */    "imageManagerListSize": 20, /* 每次列出文件数量 */    "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 *//*=====读取字节流时若为空中断读取分割线=====*/    /* 列出指定目录下的文件 */    "fileManagerActionName": "listfile", /* 传给后台的action参数值 */    "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */    "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */    "fileManagerListSize": 20, /* 每次列出文件数量 */    "fileManagerAllowFiles": [        ".png", ".jpg", ".jpeg", ".gif", ".bmp",        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"    ] /* 列出的文件类型 *//*=====读取字节流时若为空中断读取分割线=====*/}

        然后你需要在后台方法里读取这个配置文件，编辑器第一次加载时就会传递action="config"的参数来取得配置信息，GET类型的请求，这里我就做了最简单的Java IO读取信息。

后台代码：

/** * 百度UEditor服务器统一请求接口路径(配置文件、上传等) *  * 参考统一请求格式说明: http://fexteam.gz01.bdysite.com/ueditor/#dev-request_specification * @param action UEditor请求参数名, 按值分类 * @param upfile 上传的文件 * @version 1.0 * @author ericzhan1993@foxmail.com * @date 2017-09-15 */@Get("ueHotNewsServer")@Post("ueHotNewsServer")public String ueHotNewsServer(@Param("action") String action, @Param("upfile") MultipartFile upfile, 		HttpServletRequest request) {	logger.info("[后台] - [新闻管理] - [发布新闻] - [UEditor编辑器] - [serverUrl]");	System.err.println("action==========" + action);		if (action.equals("config")) {// 读取配置文件		try {			String realPath = "/static/ueditor/config.json";// 配置文件到这里修改			System.err.println("配置文件根相对路径: /WebRoot" + realPath);			// 读取UEditor配置文件: config.json(可修改)			String filePath = inv.getServletContext().getRealPath(realPath);			BufferedReader br = new BufferedReader(new FileReader(filePath));			StringBuilder sb = new StringBuilder();						//读取所有行			String line = null;			while(true) {				line = br.readLine();// FIXME 每次都创建一个新的String对象, 很浪费性能				if(StringUtils.isEmpty(line)){					break;				}				sb.append(line);			}			br.close();// 防止内存泄漏			return "@json:" + sb.toString();		} catch (FileNotFoundException e) {			e.printStackTrace();		} catch (IOException e) {			e.printStackTrace();		}	} else if (action.equals("uploadimage")) {// 上传图片		String ossFilePath = OSSFileUtil.OSSPutObject(Global.OSSIMAGE, String.valueOf(System.currentTimeMillis()), upfile, "activityfile");		String httpPath = OSSFileUtil.getUrl("mmdimage", "activityfile/" + ossFilePath);		resultJsonMap = new HashMap
    
     ();		resultJsonMap.put("state", "SUCCESS");		resultJsonMap.put("url", httpPath);		resultJsonMap.put("title", ossFilePath);		return "@json:" + JSON.toJSONString(resultJsonMap);	} else if (action.equals("uploadvideo")) {// 上传视频		String ossFilePath = OSSFileUtil.OSSPutObject(Global.OSSIMAGE, String.valueOf(System.currentTimeMillis()), upfile, "activityfile");		String httpPath = OSSFileUtil.getUrl("mmdimage", "activityfile/" + ossFilePath);		resultJsonMap = new HashMap
     
      ();		resultJsonMap.put("state", "SUCCESS");		resultJsonMap.put("url", httpPath);		resultJsonMap.put("title", ossFilePath);		return "@json:" + JSON.toJSONString(resultJsonMap);	}				return null;}
     
    

        基本原理就是他给你一个action的参数名，你根据值来判断是什么行为，然后把返回值给他就行了，返回值格式参考：，需要注意的是，我这里用的是阿里的OSS文件存储，返回值是一个http路径，如果你需要放在本地的话只要给他一个本地读取的路径即可，因为编辑器上传图片后，前端是以HTML来展示的，如：<img src="路径">，上传视频也是同理。

三、编辑器功能

常用API，可以参考下面这个官方Demo，或直接参考：

        
                
        
            
    
    
     
完整demo
    
     
    
    
    
     
        
      获得整个html的内容        
      获得内容        
      写入内容        
      追加内容        
      获得纯文本        
      获得带格式的纯文本        
      判断是否有内容        
      使编辑器获得焦点        
      编辑器是否获得焦点        
      编辑器失去焦点    
     
    
     
        
      获得当前选中的文本        
      插入给定的内容        
      可以编辑        
      不可编辑        
      隐藏编辑器        
      显示编辑器        
      设置高度为300默认关闭了自动长高    
     
    
     
        
      获取草稿箱内容        
      清空草稿箱    
     
    
    
    
         创建编辑器    
         删除编辑器
    

四、给编辑器赋值

// 加载后台游戏内容，并显示在编辑器中function loadUEContent() {	// 游戏内容	var content = '$!{gameDO.content}';	// 判断ueditor 编辑器是否创建成功（此处editGameUe是你之前声明的UE变量）	editGameUe.addListener("ready", function () {        // 只有ueditor编辑器创建成功了以后才可以使用, 向ueditor中传值        editGameUe.setContent(content);	});}

到此，这篇简单的Ueditor学习笔记就结束了，以后有机会补上别的功能，谢谢！