UEditor富文本编辑器全面使用指南
文章目录
- UEditor富文本编辑器全面使用指南
-
- 0.技术栈说明
- 1.UEditor简介
- [2. 前端配置与使用](#2. 前端配置与使用)
-
- [2.1 引入资源文件](#2.1 引入资源文件)
- [2.2 创建编辑器容器](#2.2 创建编辑器容器)
- [2.3 实例化编辑器](#2.3 实例化编辑器)
- [2.4 自定义请求路径（重要）](#2.4 自定义请求路径（重要）)
- [3. 后端实现](#3. 后端实现)
-
- [3.1 UEditorController.java控制器](#3.1 UEditorController.java控制器)
- [3.2 配置获取接口](#3.2 配置获取接口)
- [3.3 文件上传处理](#3.3 文件上传处理)
- [4. 关键注意事项](#4. 关键注意事项)
-
- [4.1 UEditor_HOME_URL配置](#4.1 UEditor_HOME_URL配置)
- [4.2 服务器接口路径配置](#4.2 服务器接口路径配置)
- [4.3 getActionUrl自定义](#4.3 getActionUrl自定义)
- [4.4 响应格式要求](#4.4 响应格式要求)
- [4.5 文件存储路径](#4.5 文件存储路径)
- [4.6 前端表单提交](#4.6 前端表单提交)
- [5. 使用步骤指南](#5. 使用步骤指南)
-
- [5.1 集成到新项目](#5.1 集成到新项目)
- [5.2 注意事项检查清单](#5.2 注意事项检查清单)
- [6. 常见问题与解决方案](#6. 常见问题与解决方案)
-
- [6.1 编辑器无法加载](#6.1 编辑器无法加载)
- [6.2 文件上传失败](#6.2 文件上传失败)
- [6.3 编辑器内容无法回显](#6.3 编辑器内容无法回显)
- [6.4 图片不显示](#6.4 图片不显示)
- 7.案例代码补全
-
- 7.1ueditor.config.js
- 7.2addAgreement.jsp
- [7.3 UEditorController.java](#7.3 UEditorController.java)
- 7.4springmvc.xml
- 7.5请求拦截器放行
0.技术栈说明
0.1前端技术
- JSP: 页面渲染技术（addAgreement.jsp）
- JavaScript: 原生JS与jQuery，用于前端交互和编辑器初始化
- jQuery Validation: 表单验证组件
- Layer: 弹出层组件
- UEditor 1.4.3: 富文本编辑器核心组件
0.2后端技术
- Java: 主要开发语言
- Spring: 依赖注入与事务管理
- SpringMVC: Web框架，处理HTTP请求
- MyBatis: ORM框架，数据库操作
- Maven: 项目构建与依赖管理
0.3其他组件
- FileStorageService: 自定义文件存储服务，处理文件上传与存储
完整的使用指南将包含：UEditor简介、前端配置与使用、后端实现、关键注意事项、使用步骤指南和常见问题与解决方案等内容，为开发者在项目中集成和使用UEditor提供全面参考。
1.UEditor简介
UEditor是由百度开发的一款功能强大的富文本编辑器，广泛应用于各类Web项目中，支持文本编辑、图片上传、视频嵌入等多种功能。
2. 前端配置与使用
2.1 引入资源文件
html
<!-- 配置UEditor的Home路径 -->
<script type="text/javascript">
window.UEDITOR_HOME_URL = "/gengducun/lib/ueditor/1.4.3/";
</script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.js"></script>2.2 创建编辑器容器
html
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>2.3 实例化编辑器
javascript
var ue = UE.getEditor('container',{
// 设置宽度
initialFrameWidth:700,
// 设置高度
initialFrameHeight:300,
// 服务器统一请求接口路径
serverUrl: '/gengducun/web/ueditor/getConfig.action'
});2.4 自定义请求路径（重要）
javascript
// 自定义getActionUrl方法，确保正确处理各种请求
ue.getActionUrl = function(action) {
// 匹配UEditor原始实现的逻辑
var actionName = this.getOpt(action) || action;
var url = '';
// 根据actionName返回对应的URL
if (actionName === 'uploadImgFile') {
url = '/gengducun/web/ueditor/uploadImgFile.action?bizType=agreement';
} else if (actionName === 'uploadVideo') {
url = '/gengducun/web/ueditor/uploadVideo.action?bizType=agreement';
} else if (actionName === 'uploadFile') {
url = '/gengducun/web/ueditor/uploadFile.action?bizType=agreement';
} else if (actionName === 'config') {
url = '/gengducun/web/ueditor/getConfig.action';
} else {
// 默认使用配置请求URL
url = '/gengducun/web/ueditor/getConfig.action';
}
return url;
};3. 后端实现
3.1 UEditorController.java控制器
java
@Controller
@RequestMapping("/web/ueditor")
public class UEditorController {
// 注入文件存储服务
private FileStorageService fileStorageService = FileStorageServiceImpl.getInstance();
// 配置获取接口
@ResponseBody
@RequestMapping(value = {"/getConfig"}, method = RequestMethod.GET)
public Map<String, Object> getConfig() {
// 返回符合UEditor格式的配置信息
// ...
}
// 图片上传接口
@ResponseBody
@RequestMapping(value = "/uploadImgFile", method = RequestMethod.POST)
public Map<String, Object> uploadImgFile(@RequestParam("file") MultipartFile file, @RequestParam String bizType) throws Exception {
// 图片上传处理逻辑
// ...
}
// 视频上传接口
@ResponseBody
@RequestMapping(value = "/uploadVideo", method = RequestMethod.POST)
public Map<String, Object> uploadVideo(@RequestParam("file") MultipartFile file, @RequestParam String bizType) throws Exception {
// 视频上传处理逻辑
// ...
}
// 文件上传接口
@ResponseBody
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file, @RequestParam String bizType) throws Exception {
// 文件上传处理逻辑
// ...
}
}3.2 配置获取接口
java
@ResponseBody
@RequestMapping(value = {"/getConfig"}, method = RequestMethod.GET)
public Map<String, Object> getConfig() {
Map<String, Object> config = new HashMap<>();
// UEditor图片上传配置项
config.put("imageActionName", "uploadImgFile");
config.put("imageFieldName", "file");
config.put("imageMaxSize", 5242880); // 5MB
config.put("imageAllowFiles", new String[]{"jpg", ".jpeg", ".png", ".gif", ".bmp"});
// 其他配置项...
return config;
}3.3 文件上传处理
java
@ResponseBody
@RequestMapping(value = "/uploadImgFile", method = RequestMethod.POST)
public Map<String, Object> uploadImgFile(@RequestParam("file") MultipartFile file, @RequestParam String bizType) throws Exception {
// 创建响应Map
Map<String, Object> result = new HashMap<>();
//(1)上传图片的原始名称
String serverPicPath = "";
String originalFilename = file.getOriginalFilename();
if (!TextUtils.isEmpty(originalFilename) && !TextUtils.isEmpty(bizType)) {
//（2）新的图片名称
String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
//（3）获取存储路径
String storeFileName = fileStorageService.getPhysicalPath(SysConfig.FileType.IMAGE, bizType, newFileName);
//（4）确保目录存在
File dir = new File(storeFileName).getParentFile();
if (!dir.exists()) {
dir.mkdirs();
}
//（5）将内存中的数据写入磁盘
file.transferTo(new File(storeFileName));
//（6）获取HTTP访问路径
serverPicPath = fileStorageService.getHttpPath(SysConfig.FileType.IMAGE, bizType, newFileName);
}
if (!TextUtils.isEmpty(serverPicPath)) {
// UEditor期望的成功响应格式
result.put("state", "SUCCESS");
result.put("url", serverPicPath);
result.put("title", originalFilename);
result.put("original", originalFilename);
result.put("type", originalFilename.substring(originalFilename.lastIndexOf(".")));
result.put("size", file.getSize());
} else {
// UEditor期望的错误响应格式
result.put("state", "图片上传失败：" + CommonErrorCode.Value.COMMON_ERROR_1001_1003);
}
return result;
}4. 关键注意事项
4.1 UEditor_HOME_URL配置
- 必须正确配置
window.UEDITOR_HOME_URL，确保编辑器能正确加载资源文件 - 建议使用绝对路径，避免相对路径带来的问题
4.2 服务器接口路径配置
- 在
ueditor.config.js中配置serverUrl：serverUrl:URL+"/web/ueditor/getConfig.action" - 同时在实例化编辑器时也要指定
serverUrl
4.3 getActionUrl自定义
- 非常重要 ：必须自定义
getActionUrl方法，确保不同类型的请求（图片、视频、文件）能正确路由到对应的处理方法 - 每个请求类型需要指定正确的URL和业务类型（bizType）参数
4.4 响应格式要求
- 后端接口必须返回符合UEditor格式要求的JSON响应
- 成功响应必须包含：
state: "SUCCESS"、url、title、original、type、size等字段 - 错误响应必须包含：
state: "错误信息"
4.5 文件存储路径
- 使用
bizType参数区分不同业务的文件存储路径 - 生成唯一文件名，避免文件覆盖
- 确保存储目录存在，不存在时自动创建
4.6 前端表单提交
- 编辑器内容会自动包含在表单提交中，字段名由容器的
name属性指定 - 在JSP中，使用EL表达式可以回显内容：
${agreementCustom.content}
5. 使用步骤指南
5.1 集成到新项目
- 引入资源文件：将UEditor资源文件复制到项目中
- 配置路径 ：设置
UEDITOR_HOME_URL和serverUrl - 创建容器：在页面中添加编辑器容器
- 实例化编辑器：初始化UEditor实例并配置参数
- 自定义请求路径 ：实现
getActionUrl方法 - 后端实现 ：创建
UEditorController处理请求 - 测试：验证编辑器功能和文件上传
5.2 注意事项检查清单
-
确认UEDITOR_HOME_URL 配置正确
-
确认 serverUrl 配置正确
-
确认getActionUrl 方法实现完整
-
确认后端接口返回正确的响应格式
-
确认文件存储目录可写
-
确认业务类型（bizType）参数正确传递
6. 常见问题与解决方案
6.1 编辑器无法加载
- 检查
UEDITOR_HOME_URL是否正确 - 检查资源文件路径是否正确
6.2 文件上传失败
- 检查
getActionUrl方法是否正确配置 - 检查后端接口是否正确处理请求
- 检查文件存储目录权限
6.3 编辑器内容无法回显
- 检查容器的
type="text/plain"属性 - 检查EL表达式是否正确
6.4 图片不显示
- 检查图片URL是否正确
- 检查图片存储路径和访问路径是否一致
通过以上配置和注意事项，您可以在项目中成功集成和使用UEditor编辑器，并根据业务需求进行定制化开发。
7.案例代码补全
7.1ueditor.config.js
javascript
/**
* ueditor完整配置项
* 可以在这里配置整个编辑器的特性
*/
/**************************提示********************************
* 所有被注释的配置项均为UEditor默认值。
* 修改默认配置请首先确保已经完全明确该参数的真实用途。
* 主要有两种修改方案，一种是取消此处注释，然后修改成对应参数；另一种是在实例化编辑器时传入对应参数。
* 当升级编辑器时，可直接使用旧版配置文件替换新版配置文件,不用担心旧版配置文件中因缺少新功能所需的参数而导致脚本报错。
**************************提示********************************/
(function () {
/**
* 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
* 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
* "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
* 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
*/
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
,serverUrl:URL+"/web/ueditor/getConfig.action"
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
,toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts'
]]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
//,labelMap:{
// 'anchor':'', 'undo':''
//}
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
//现有如下皮肤:default
//,theme:'default'
//,themePath:URL +"themes/"
//,zIndex : 900 //编辑器层级的基数,默认是900
//针对getAllHtml方法，会在对应的head标签中增加该编码设置。
//,charset:"utf-8"
//若实例化编辑器的页面手动修改的domain，此处需要设置为true
//,customDomain:false
//常用配置项目
//,isShow : true //默认显示编辑器
//,textarea:'editorValue' // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
//,initialContent:'欢迎使用ueditor!' //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
//,autoClearinitialContent:true //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
//,focus:false //初始化时，是否让编辑器获得焦点true或false
//如果自定义，最好给p标签如下的行高，要不输入中文时，会有跳动感
//,initialStyle:'p{line-height:1em}'//编辑器层级的基数,可以用来改变字体等
//,iframeCssUrl: URL + '/themes/iframe.css' //给编辑器内部引入一个css文件
//indentValue
//首行缩进距离,默认是2em
//,indentValue:'2em'
//,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
//,initialFrameHeight:320 //初始化编辑器高度,默认320
//,readonly : false //编辑器初始化结束后,编辑区域是否是只读的，默认是false
//,autoClearEmptyNode : true //getContent时，是否删除空的inlineElement节点（包括嵌套的情况）
//启用自动保存
//,enableAutoSave: true
//自动保存间隔时间， 单位ms
//,saveInterval: 500
//,fullscreen : false //是否开启初始化时即全屏，默认关闭
//,imagePopup:true //图片操作的浮层开关，默认打开
//,autoSyncData:true //自动同步编辑器要提交的数据
//,emotionLocalization:false //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹
//粘贴只保留标签，去除标签所有属性
//,retainOnlyLabelPasted: false
//,pasteplain:false //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
//纯文本粘贴模式下的过滤规则
//'filterTxtRules' : function(){
// function transP(node){
// node.tagName = 'p';
// node.setStyle();
// }
// return {
// //直接删除及其字节点内容
// '-' : 'script style object iframe embed input select',
// 'p': {$:{}},
// 'br':{$:{}},
// 'div':{'$':{}},
// 'li':{'$':{}},
// 'caption':transP,
// 'th':transP,
// 'tr':transP,
// 'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP,
// 'td':function(node){
// //没有内容的td直接删掉
// var txt = !!node.innerText();
// if(txt){
// node.parentNode.insertAfter(UE.uNode.createText(' '),node);
// }
// node.parentNode.removeChild(node,node.innerText())
// }
// }
//}()
//,allHtmlEnabled:false //提交到后台的数据是否包含整个html字符串
//insertorderedlist
//有序列表的下拉配置,值留空时支持多语言自动识别，若配置值，则以此值为准
//,'insertorderedlist':{
// //自定的样式
// 'num':'1,2,3...',
// 'num1':'1),2),3)...',
// 'num2':'(1),(2),(3)...',
// 'cn':'一,二,三....',
// 'cn1':'一),二),三)....',
// 'cn2':'(一),(二),(三)....',
// //系统自带
// 'decimal' : '' , //'1,2,3...'
// 'lower-alpha' : '' , // 'a,b,c...'
// 'lower-roman' : '' , //'i,ii,iii...'
// 'upper-alpha' : '' , lang //'A,B,C'
// 'upper-roman' : '' //'I,II,III...'
//}
//insertunorderedlist
//无序列表的下拉配置，值留空时支持多语言自动识别，若配置值，则以此值为准
//,insertunorderedlist : { //自定的样式
// 'dash' :'--- 破折号', //-破折号
// 'dot':' 。 小圆圈', //系统自带
// 'circle' : '', // '○ 小圆圈'
// 'disc' : '', // '● 小圆点'
// 'square' : '' //'■ 小方块'
//}
//,listDefaultPaddingLeft : '30'//默认的左边缩进的基数倍
//,listiconpath : 'http://bs.baidu.com/listicon/'//自定义标号的路径
//,maxListLevel : 3 //限制可以tab的级数, 设置-1为不限制
//,autoTransWordToList:false //禁止word中粘贴进来的列表自动变成列表标签
//fontfamily
//字体设置 label留空支持多语言自动切换，若配置，则以配置值为准
//,'fontfamily':[
// { label:'',name:'songti',val:'宋体,SimSun'},
// { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
// { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
// { label:'',name:'heiti',val:'黑体, SimHei'},
// { label:'',name:'lishu',val:'隶书, SimLi'},
// { label:'',name:'andaleMono',val:'andale mono'},
// { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
// { label:'',name:'arialBlack',val:'arial black,avant garde'},
// { label:'',name:'comicSansMs',val:'comic sans ms'},
// { label:'',name:'impact',val:'impact,chicago'},
// { label:'',name:'timesNewRoman',val:'times new roman'}
//]
//fontsize
//字号
//,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]
//paragraph
//段落格式 值留空时支持多语言自动识别，若配置，则以配置值为准
//,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}
//rowspacingtop
//段间距 值和显示的名字相同
//,'rowspacingtop':['5', '10', '15', '20', '25']
//rowspacingBottom
//段间距 值和显示的名字相同
//,'rowspacingbottom':['5', '10', '15', '20', '25']
//lineheight
//行内间距 值和显示的名字相同
//,'lineheight':['1', '1.5','1.75','2', '3', '4', '5']
//customstyle
//自定义样式，不支持国际化，此处配置值即可最后显示值
//block的元素是依据设置段落的逻辑设置的，inline的元素依据BIU的逻辑设置
//尽量使用一些常用的标签
//参数说明
//tag 使用的标签名字
//label 显示的名字也是用来标识不同类型的标识符，注意这个值每个要不同，
//style 添加的样式
//每一个对象就是一个自定义的样式
//,'customstyle':[
// {tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'},
// {tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'},
// {tag:'span',name:'im', label:'', style:'font-style:italic;font-weight:bold'},
// {tag:'span',name:'hi', label:'', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'}
//]
//打开右键菜单功能
//,enableContextMenu: true
//右键菜单的内容，可以参考plugins/contextmenu.js里边的默认菜单的例子，label留空支持国际化，否则以此配置为准
//,contextMenu:[
// {
// label:'', //显示的名称
// cmdName:'selectall',//执行的command命令，当点击这个右键菜单时
// //exec可选，有了exec就会在点击时执行这个function，优先级高于cmdName
// exec:function () {
// //this是当前编辑器的实例
// //this.ui._dialogs['inserttableDialog'].open();
// }
// }
//]
//快捷菜单
//,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]
//elementPathEnabled
//是否启用元素路径，默认是显示
//,elementPathEnabled : true
//wordCount
//,wordCount:true //是否开启字数统计
//,maximumWords:10000 //允许的最大字符数
//字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数,留空支持多语言自动切换，否则按此配置显示
//,wordCountMsg:'' //当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符
//超出字数限制提示 留空支持多语言自动切换，否则按此配置显示
//,wordOverFlowMsg:'' //<span style="color:red;">你输入的字符个数已经超出最大允许值，服务器可能会拒绝保存！</span>
//tab
//点击tab键时移动的距离,tabSize倍数，tabNode什么字符做为单位
//,tabSize:4
//,tabNode:' '
//removeFormat
//清除格式时可以删除的标签和属性
//removeForamtTags标签
//,removeFormatTags:'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var'
//removeFormatAttributes属性
//,removeFormatAttributes:'class,style,lang,width,height,align,hspace,valign'
//undo
//可以最多回退的次数,默认20
//,maxUndoCount:20
//当输入的字符数超过该值时，保存一次现场
//,maxInputCount:1
//autoHeightEnabled
// 是否自动长高,默认true
//,autoHeightEnabled:true
//scaleEnabled
//是否可以拉伸长高,默认true(当开启时，自动长高失效)
//,scaleEnabled:false
//,minFrameWidth:800 //编辑器拖动时最小宽度,默认800
//,minFrameHeight:220 //编辑器拖动时最小高度,默认220
//autoFloatEnabled
//是否保持toolbar的位置不动,默认true
//,autoFloatEnabled:true
//浮动时工具栏距离浏览器顶部的高度，用于某些具有固定头部的页面
//,topOffset:30
//编辑器底部距离工具栏高度(如果参数大于等于编辑器高度，则设置无效)
//,toolbarTopOffset:400
//pageBreakTag
//分页标识符,默认是_ueditor_page_break_tag_
//,pageBreakTag:'_ueditor_page_break_tag_'
//autotypeset
//自动排版参数
//,autotypeset: {
// mergeEmptyline: true, //合并空行
// removeClass: true, //去掉冗余的class
// removeEmptyline: false, //去掉空行
// textAlign:"left", //段落的排版方式，可以是 left,right,center,justify 去掉这个属性表示不执行排版
// imageBlockLine: 'center', //图片的浮动方式，独占一行剧中,左右浮动，默认: center,left,right,none 去掉这个属性表示不执行排版
// pasteFilter: false, //根据规则过滤没事粘贴进来的内容
// clearFontSize: false, //去掉所有的内嵌字号，使用编辑器默认的字号
// clearFontFamily: false, //去掉所有的内嵌字体，使用编辑器默认的字体
// removeEmptyNode: false, // 去掉空节点
// //可以去掉的标签
// removeTagNames: {标签名字:1},
// indent: false, // 行首缩进
// indentValue : '2em', //行首缩进的大小
// bdc2sb: false,
// tobdc: false
//}
//tableDragable
//表格是否可以拖拽
//,tableDragable: true
//,disabledTableInTable:true //禁止表格嵌套
//sourceEditor
//源码的查看方式,codemirror 是代码高亮，textarea是文本框,默认是codemirror
//注意默认codemirror只能在ie8+和非ie中使用
//,sourceEditor:"codemirror"
//如果sourceEditor是codemirror，还用配置一下两个参数
//codeMirrorJsUrl js加载的路径，默认是 URL + "third-party/codemirror/codemirror.js"
//,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"
//codeMirrorCssUrl css加载的路径，默认是 URL + "third-party/codemirror/codemirror.css"
//,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css"
//编辑器初始化完成后是否进入源码模式，默认为否。
//,sourceEditorFirst:false
//iframeUrlMap
//dialog内容的路径 ～会被替换成URL,垓属性一旦打开，将覆盖所有的dialog的默认路径
//,iframeUrlMap:{
// 'anchor':'~/dialogs/anchor/anchor.html',
//}
//webAppKey 百度应用的APIkey，每个站长必须首先去百度官网注册一个key后方能正常使用app功能，注册介绍，http://app.baidu.com/static/cms/getapikey.html
//, webAppKey: ""
};
function getUEBasePath(docUrl, confUrl) {
return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath());
}
function getConfigFilePath() {
var configPath = document.getElementsByTagName('script');
return configPath[ configPath.length - 1 ].src;
}
function getBasePath(docUrl, confUrl) {
var basePath = confUrl;
if (/^(\/|\\\\)/.test(confUrl)) {
basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, '');
} else if (!/^[a-z]+:/i.test(confUrl)) {
docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, '');
basePath = docUrl + "" + confUrl;
}
return optimizationPath(basePath);
}
function optimizationPath(path) {
var protocol = /^[a-z]+:\/\//.exec(path)[ 0 ],
tmp = null,
res = [];
path = path.replace(protocol, "").split("?")[0].split("#")[0];
path = path.replace(/\\/g, '/').split(/\//);
path[ path.length - 1 ] = "";
while (path.length) {
if (( tmp = path.shift() ) === "..") {
res.pop();
} else if (tmp !== ".") {
res.push(tmp);
}
}
return protocol + res.join("/");
}
window.UE = {
getUEBasePath: getUEBasePath
};
})();7.2addAgreement.jsp
html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="${pageContext.request.contextPath}/">
<title>添加服务协议</title>
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css" />
<link rel="stylesheet" type="text/css" href="lib/My97DatePicker/4.8/skin/WdatePicker.css" />
</head>
<body>
<article class="page-container">
<form class="form form-horizontal" id="form-agreement-add" enctype="multipart/form-data">
<!-- 显示请求参数校验服务器端校验的错误信息 -->
<div id="server_check_error" class="row cl" style="visibility:hidden;">
<label class="form-label col-xs-4 col-sm-3" style="color:#ff0000;">
服务端请求参数校验错误：
</label>
<div id="server_check_error_list" class="formControls col-xs-8 col-sm-7" style="color: #ff0000;">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>协议名称：</label>
<div class="formControls col-xs-8 col-sm-7">
<input type="text" id="name" name="name" value="" class="input-text width_150" placeholder="" autocomplete="off">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>协议类型：</label>
<div class="formControls col-xs-8 col-sm-7">
<select name="type" id="type" class="select t_center width_150 height_30">
<option value="">--请选择--</option>
<c:forEach items="${agreementTypeList}" var="agreementType">
<option value="${agreementType.typeId}">${agreementType.typeName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>协议内容：</label>
<div class="formControls col-xs-8 col-sm-7">
<!-- 加载编辑器容器 -->
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value=" 提交 ">
</div>
</div>
</form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<!-- 引入ueditor资源文件-->
<script type="text/javascript">
// 配置UEditor的Home路径
window.UEDITOR_HOME_URL = "/gengducun/lib/ueditor/1.4.3/";
</script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.js"></script>
<!--引入自己写的业务相关的脚本-->
<script type="text/javascript" src="lib/user_js/gdc_http_utils.js"></script>
<%--<script type="text/javascript" src="lib/user_js/gdc_img_upload_utils.js"></script>
<script type="text/javascript" src="/gengducun/lib/My97DatePicker/4.8/WdatePicker.js"></script>--%>
<script type="text/javascript">
<!--引入自己写的业务相关的脚本-->
<script type="text/javascript" src="lib/user_js/gdc_http_utils.js"></script>
<script type="text/javascript">
<!-- 实例化ueditor编辑器 -->
var ue = UE.getEditor('container',{
//1.设置ueditor的参数
//(1)设置宽度
initialFrameWidth:700,
//(2)设置高度
initialFrameHeight:300,
// 服务器统一请求接口路径
serverUrl: '/gengducun/web/ueditor/getConfig.action'
});
// 自定义getActionUrl方法，确保正确处理各种请求
ue.getActionUrl = function(action) {
// 匹配UEditor原始实现的逻辑
var actionName = this.getOpt(action) || action;
var url = '';
// 根据actionName返回对应的URL
if (actionName === 'uploadImgFile') {
url = '/gengducun/web/ueditor/uploadImgFile.action?bizType=agreement';
} else if (actionName === 'uploadVideo') {
url = '/gengducun/web/ueditor/uploadVideo.action?bizType=agreement';
} else if (actionName === 'uploadFile') {
url = '/gengducun/web/ueditor/uploadFile.action?bizType=agreement';
} else if (actionName === 'config') {
url = '/gengducun/web/ueditor/getConfig.action';
} else {
// 默认使用配置请求URL
url = '/gengducun/web/ueditor/getConfig.action';
}
return url;
};
$(function(){
//表单验证初始化
$("#form-agreement-add").validate({
rules:{
agreementName:{
required:true
},
agreementCode:{
required:true
},
appurl:{
required:true
}
},
onkeyup:false,
focusCleanup:true,
success:"valid",
submitHandler:function(form){
httpRequest("web/agreement/addAgreement.action",form,"server_check_error","server_check_error_list");
}
});
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>7.3 UEditorController.java
java
package com.gdc.ssm.controller.web;
import com.gdc.ssm.constant.SysConfig;
import com.gdc.ssm.constant.code.errorcode.CommonErrorCode;
import com.gdc.ssm.service.FileStorageService;
import com.gdc.ssm.service.impl.FileStorageServiceImpl;
import com.gdc.ssm.util.TextUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
/**
* UEditor编辑器专用文件上传控制器
* 专门处理UEditor编辑器的文件上传请求，返回符合UEditor格式要求的响应
*/
@Controller
@RequestMapping("/web/ueditor")
public class UEditorController {
// 注入文件存储服务
private FileStorageService fileStorageService = FileStorageServiceImpl.getInstance();
/**
* 处理UEditor的config请求，返回服务器配置
* @return 符合UEditor格式要求的服务器配置Map
*/
@ResponseBody
@RequestMapping(value = {"/getConfig"}, method = RequestMethod.GET)
public Map<String, Object> getConfig() {
Map<String, Object> config = new HashMap<>();
// UEditor图片上传配置项
config.put("imageActionName", "uploadImgFile");
config.put("imageFieldName", "file");
config.put("imageMaxSize", 5242880); // 5MB
config.put("imageAllowFiles", new String[]{".jpg", ".jpeg", ".png", ".gif", ".bmp"});
config.put("imageCompressEnable", true);
config.put("imageCompressBorder", 1600);
config.put("imageInsertAlign", "none");
config.put("imageUrlPrefix", "");
// UEditor视频上传配置项
config.put("videoActionName", "uploadVideo");
config.put("videoFieldName", "file");
config.put("videoMaxSize", 102400000); // 100MB
config.put("videoAllowFiles", new String[]{".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"});
// UEditor文件上传配置项
config.put("fileActionName", "uploadFile");
config.put("fileFieldName", "file");
config.put("fileMaxSize", 51200000); // 50MB
config.put("fileAllowFiles", new String[]{".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"});
return config;
}
/**
* 处理UEditor图片上传请求
* @param file 上传的文件
* @param bizType 业务类型
* @return 符合UEditor格式要求的响应Map
* @throws Exception 上传过程中可能出现的异常
*/
@ResponseBody
@RequestMapping(value = "/uploadImgFile", method = RequestMethod.POST)
public Map<String, Object> uploadImgFile(@RequestParam("file") MultipartFile file,@RequestParam String bizType) throws Exception {
// 创建响应Map
Map<String, Object> result = new HashMap<>();
//(1)上传图片的原始名称
String serverPicPath = "";
String originalFilename = file.getOriginalFilename();
if (!TextUtils.isEmpty(originalFilename) && !TextUtils.isEmpty(bizType)) {
//（2）新的图片名称
String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
//（3）获取存储路径
String storeFileName = fileStorageService.getPhysicalPath(SysConfig.FileType.IMAGE, bizType, newFileName);
//（4）确保目录存在
File dir = new File(storeFileName).getParentFile();
if (!dir.exists()) {
dir.mkdirs();
}
//（5）将内存中的数据写入磁盘
file.transferTo(new File(storeFileName));
//（6）获取HTTP访问路径
serverPicPath = fileStorageService.getHttpPath(SysConfig.FileType.IMAGE, bizType, newFileName);
}
if (!TextUtils.isEmpty(serverPicPath)) {
// UEditor期望的成功响应格式
result.put("state", "SUCCESS");
result.put("url", serverPicPath);
result.put("title", originalFilename);
result.put("original", originalFilename);
result.put("type", originalFilename.substring(originalFilename.lastIndexOf(".")));
result.put("size", file.getSize());
} else {
// UEditor期望的错误响应格式
result.put("state", "图片上传失败：" + CommonErrorCode.Value.COMMON_ERROR_1001_1003);
}
return result;
}
/**
* 处理UEditor视频上传请求
* @param file 上传的视频文件
* @param bizType 业务类型
* @return 符合UEditor格式要求的响应Map
* @throws Exception 上传过程中可能出现的异常
*/
@ResponseBody
@RequestMapping(value = "/uploadVideo", method = RequestMethod.POST)
public Map<String, Object> uploadVideo(@RequestParam("file") MultipartFile file, @RequestParam String bizType) throws Exception {
// 创建响应Map
Map<String, Object> result = new HashMap<>();
//(1)上传视频的原始名称
String serverVideoPath = "";
String originalFilename = file.getOriginalFilename();
if (!TextUtils.isEmpty(originalFilename) && !TextUtils.isEmpty(bizType)) {
//（2）新的视频名称
String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
//（3）获取存储路径
String storeFileName = fileStorageService.getPhysicalPath(SysConfig.FileType.VIDEO, bizType, newFileName);
//（4）确保目录存在
File dir = new File(storeFileName).getParentFile();
if (!dir.exists()) {
dir.mkdirs();
}
//（5）将内存中的数据写入磁盘
file.transferTo(new File(storeFileName));
//（6）获取HTTP访问路径
serverVideoPath = fileStorageService.getHttpPath(SysConfig.FileType.VIDEO, bizType, newFileName);
}
if (!TextUtils.isEmpty(serverVideoPath)) {
// UEditor期望的成功响应格式
result.put("state", "SUCCESS");
result.put("url", serverVideoPath);
result.put("title", originalFilename);
result.put("original", originalFilename);
result.put("type", originalFilename.substring(originalFilename.lastIndexOf(".")));
result.put("size", file.getSize());
} else {
// UEditor期望的错误响应格式
result.put("state", "视频上传失败：" + CommonErrorCode.Value.COMMON_ERROR_1001_1003);
}
return result;
}
/**
* 处理UEditor文件上传请求
* @param file 上传的文件
* @param bizType 业务类型
* @return 符合UEditor格式要求的响应Map
* @throws Exception 上传过程中可能出现的异常
*/
@ResponseBody
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file, @RequestParam String bizType) throws Exception {
// 创建响应Map
Map<String, Object> result = new HashMap<>();
//(1)上传文件的原始名称
String serverFilePath = "";
String originalFilename = file.getOriginalFilename();
if (!TextUtils.isEmpty(originalFilename) && !TextUtils.isEmpty(bizType)) {
//（2）新的文件名称
String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
//（3）获取存储路径
String storeFileName = fileStorageService.getPhysicalPath(SysConfig.FileType.FILE, bizType, newFileName);
//（4）确保目录存在
File dir = new File(storeFileName).getParentFile();
if (!dir.exists()) {
dir.mkdirs();
}
//（5）将内存中的数据写入磁盘
file.transferTo(new File(storeFileName));
//（6）获取HTTP访问路径
serverFilePath = fileStorageService.getHttpPath(SysConfig.FileType.FILE, bizType, newFileName);
}
if (!TextUtils.isEmpty(serverFilePath)) {
// UEditor期望的成功响应格式
result.put("state", "SUCCESS");
result.put("url", serverFilePath);
result.put("title", originalFilename);
result.put("original", originalFilename);
result.put("type", originalFilename.substring(originalFilename.lastIndexOf(".")));
result.put("size", file.getSize());
} else {
// UEditor期望的错误响应格式
result.put("state", "文件上传失败：" + CommonErrorCode.Value.COMMON_ERROR_1001_1003);
}
return result;
}
}7.4springmvc.xml
（1）注意配置一下上传文件大小的限制
xml
<!--
8.文件上传解析器
（1）多部件数据类型解析器
（2）图片上传功能中需要用到
（3）通常是要指定一个图片存储服务器，但是在我的项目中指定了一个存储图片的虚拟目录，需要在Tomcat的server.xml中配置该虚拟目录
（4）注意：在图片虚拟目录中，一定将图片目录分级创建，分级创建的目的是为了提高I/O性能。如果把所有的图片放在一个目录，找起来就会比较慢
分级的方法，一般我们采用按照日期（年、月、日）进行分级创建。
-->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 8.1指定所上传文件的总大小不能超过3000MB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 -->
<property name="maxUploadSize" value="3145728000" />
<!-- 8.2指定单个文件的最大大小为1000MB -->
<property name="maxUploadSizePerFile" value="1048576000" />
<!-- 8.3指定默认编码 -->
<property name="defaultEncoding" value="UTF-8" />
<!--resolveLazily属性启用是为了推迟文件解析，以便在UploadController 中捕获文件大小异常-->
<property name="resolveLazily" value="true"/>
</bean>7.5请求拦截器放行
java
package com.gdc.ssm.intercepter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.gdc.ssm.constant.LoginConstant;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import com.gdc.ssm.po.UserCustom;
/**
* 1.拦截器的执行时机
* （1）在Controller中的方法执行之前调用
* （2）在Controller中的方法执行之中调用（意思就是Controller处理业务过程当中，可以为某个具体业务加一些自己的处理逻辑）
* （3）在Controller中的方法执行之后调用
*
* 2.登录认证拦截器
* （1）判断用户是否登录，如果没有登录，就跳转到一个登录的页面
*/
@Component
public class LoginIntercepter implements HandlerInterceptor {
/**
*1.在Controller执行之前调用
* （1）用于身份认证、身份授权
* （2）比如身份认证，如果认证不通过，表示当前用户没有登录，需要此方法拦截不再向下执行
*/
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//1.如果是移动端请求，请求路径中带有mobile字样，则放行
String requestUrl = request.getRequestURI();
if(requestUrl.contains("mobile") || requestUrl.contains("/uploadImgFile")||requestUrl.contains("/uploadVideo")||requestUrl.contains("/uploadFile")) {
return true;
}
//2.获取登录的用户
UserCustom dbUser = (UserCustom) request.getSession().getAttribute(LoginConstant.SESSION_USER);
//2.判断是否是登录的状态
if(dbUser != null) {
//(2)已经登录过就放行
return true;
}else {
//(1)没有登录跳转到登录页面，不放行
//(2)sendRedirect会参考当前路径
String url = request.getContextPath() + "/web/user/toLogin.action";
response.sendRedirect(url);
}
return false;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
}
}