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"], /* 上传视频格式显示 */

    /* 上传文件配置 */
    "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()));