ueditor的使用

ueditor下载,感谢国人对开源的贡献，ckeditor、ckfinder是收费，也是有坑的。ueditor虽然不完美，但是值得我尊敬。

ueditor文件放在webapp目录下面



1 config.json

physicalPath是物理路径、virtualPath是虚拟路径、ctxPath是上线文路径，这些是调整了ueditor的源码。因为在实际应用中，图片存储并不是存在当前工程里面，而是存储在其他目录中，所以需要通过虚拟目录来实现。

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
/* 上传文件路径 */
"physicalPath":"/usr/local/upload",
"virtualPath":"/upload",
"ctxPath":"http://localhost:8097/sms",
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "/{yyyy}{mm}{dd}/{time}{rand:6}",
/*"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",*/ /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {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": "/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
"scrawlUrlPrefix": "", /* 图片访问路径前缀 */
"scrawlInsertAlign": "none",

/* 截图工具上传 */
"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat": "/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

/* 抓取远程图片配置 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
"catcherFieldName": "source", /* 提交的图片列表表单名称 */
"catcherPathFormat": "/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix": "", /* 图片访问路径前缀 */
"catcherMaxSize": 2048000, /* 上传大小限制，单位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "upfile", /* 提交的视频表单名称 */
"videoPathFormat": "/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

/* 上传文件
4000
配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "upfile", /* 提交的文件表单名称 */
"filePathFormat": "/{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"
] /* 列出的文件类型 */

}

2 form.jsp

引入ueditor的资源

<!-- css -->
<link href="${ctxResources}/plugins/ueditor/themes/default/css/ueditor.min.css" rel="stylesheet" type="text/css" />
<link href="${ctxResources}/plugins/ueditor/third-party/codemirror/codemirror.css" rel="stylesheet" type="text/css" />

<!-- jquery -->
<script src="${ctxResources}/plugins/ueditor/ueditor.config.js"></script>
<script src="${ctxResources}/plugins/ueditor/third-party/codemirror/codemirror.js"></script>
<script src="${ctxResources}/plugins/ueditor/third-party/zeroclipboard/ZeroClipboard.min.js"></script>
<script src="${ctxResources}/plugins/ueditor/ueditor.all.js"></script>
<script src="${ctxResources}/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>

<tr>
<td width="15%" style="text-align: right">商品详情：</td>
<td width="85%" colspan="3"><input id="detail" name="detail" type="hidden"
value="${smsMallCommodity.detail}" /> <script id="detailId"
type="text/plain" style="width: 100%; height: 200px;" class="">
</script></td>
</tr>

function initUeditor() {
var action = $('#action').val();
UE.getEditor('detailId');
if (action == 'edit') {
UE.getEditor('detailId').addListener("ready", function() {
UE.getEditor('detailId').setContent($('#detail').val());
});
}
}
function submitForm(){
var action = $('#action').val();
var url = ctx + '/smsMallCommodity/' + action;
$('#mainform').form('submit',{
url:url,
onSubmit:function(){
var isValid = $(this).form('enableValidation').form('validate');
if (isValid){
$.messager.progress();
$('#detail').val(UE.getEditor('detailId').getContent());
}
return isValid; // 返回false终止表单提交
},
success:function(result){
$.messager.progress('close');
var data = $.parseJSON(result);
if (data.success){
$('#action').val(data.data);
$.messager.alert('系统提示',data.msg,'info');
} else{
$.messager.alert('系统提示',data.msg,'error');
}
}
});
}

3 pom.xml

这里我稍微改了一下ueditor的源码，并上传到csdn。

<dependency>
<groupId>com.dzmsoft</groupId>
<artifactId>dzmsoft.framework.ueditor</artifactId>
<version>1.0.0</version>
</dependency>

4 controller.java

注意unescapeHtml和escapeHtml的使用，需要考虑到的html的字符转义问题。

保存的代码

smsMallCommodity.setDetail(StringUtil.unescapeHtml(smsMallCommodity.getDetail()));

编辑查看的代码

SmsMallCommodity smsMallCommodity = smsMallCommodityService.selectByPrimaryKey(id);
smsMallCommodity.setDetail(StringUtil.escapeHtml(smsMallCommodity.getDetail()));