使用百度编辑器UEditor小总结
百度编辑器UEditor 下载：
http://ueditor.baidu.com/website/download.html
将包下载下来放在web包下，我的是这个：
在jsp页面按正确路径引入
在<head></head>中代码
注意：
提交的地方 一定要使用它提供的这个方法，因为这里有赋值.
要使得上传图片和附件等功能页面出来，就要调试editor_config.js。
其中的rootpath：
这是我项目所需的路径，依照自己的项目找到正确的插件地址就可以。
上传图片的页面在ueditor\dialogs\image\image.html
修改它的上传处理操作路径：
上传附件的页面在ueditor\dialogs\attachment\attachment.html
修改它的上传处理操作路径：
上传图片和附件功能实现代码放在ueditor\server\upload下，有各4种语言的上传例子，参照修改使用，以上的两个jsp（'/upload/uploadImage.jsp'和 '/upload/uploadFile.jsp',
）就是参照里面的up.jsp做的，基本上不需要有大的改动，主要是把存储路径和访问路径调对，就行。
editor_config.js中的代码
up.jsp中的代码
editor_config.js中的代码中的 rootPath 和 up.jsp中的代码中的url就是图片的地址，访问的地址，就是把rootPath 转化为域名，这个自己好好调试一下就出来了，附件也和上传图片基本一样。重点还是自己弄清楚自己的路径怎么设置的，才能正确访问到。
jsp页面另一种赋值：
form提交之前或者js验证需要做一个操作：
官方文档可参考：
http://ueditor.baidu.com/website/document.html
http://ueditor.baidu.com/website/download.html
将包下载下来放在web包下，我的是这个：
在jsp页面按正确路径引入
在<head></head>中代码
<script type="text/javascript" charset="utf-8" src="<c:url value='/js/ueditor/editor_config.js'/>"></script>
<script type="text/javascript" charset="utf-8" src="<c:url value='/js/ueditor/editor_all_min.js'/>"></script>
<link rel="stylesheet" href="<c:url value='/js/ueditor/themes/default/ueditor.css'/>" />
<script src="<c:url value="/js/jquery/jquery-1.4.2.min.js"/>"></script>
<script language="javascript">
$(document).ready(function() {
var editor = new baidu.editor.ui.Editor({
textarea : 'description' // textarea 的名称，后台就是接这个变量。
});
//var URL="../js/ueditor/";
editor.render("myEditor");
$('#submitLink').removeAttr("href")
.click(function() {
if(editor.hasContents()){ //提交条件满足时提交内容
editor.sync(); //此处的editor是页面实例化出来的编辑器对象
$('#caseForm').submit();
}else{
alert("案例描述 不能为空！！ ");
}
}).css({
'cursor' : 'pointer'
});
$('#cancelLink').removeAttr("href")
.click(function() {
//$('#caseForm').submit();
}).css({
'cursor' : 'pointer'
});
});
</script>
<form id="caseForm" name="caseForm" action="uploadCase.do" method="post" enctype="multipart/form-data">
<tr>
<td valign="top">描述</td>
<td colspan="2">
<script type="text/plain" id="myEditor">${description}</script>
</td>
</tr>
<a id="submitLink" >确定</tt></a>
<a id="cancelLink" >
取消</tt></a>
注意：
提交的地方 一定要使用它提供的这个方法，因为这里有赋值.
要使得上传图片和附件等功能页面出来，就要调试editor_config.js。
//dialog内容的路径 ～会被替换成URL
iframeUrlMap:{
'anchor':rootPath+'/js/ueditor/dialogs/anchor/anchor.html',
'insertimage':rootPath+'/js/ueditor/dialogs/image/image.html',
'inserttable':rootPath+'/js/ueditor/dialogs/table/table.html',
'link':rootPath+'/js/ueditor/dialogs/link/link.html',
'spechars':rootPath+'/js/ueditor/dialogs/spechars/spechars.html',
'searchreplace':rootPath+'/js/ueditor/dialogs/searchreplace/searchreplace.html',
'map':rootPath+'/js/ueditor/dialogs/map/map.html',
'gmap':rootPath+'/js/ueditor/dialogs/gmap/gmap.html',
'insertvideo':rootPath+'/js/ueditor/dialogs/video/video.html',
'help':rootPath+'/js/ueditor/dialogs/help/help.html',
'highlightcode':rootPath+'/js/ueditor/dialogs/code/code.html',
'emotion':rootPath+'/js/ueditor/dialogs/emotion/emotion.html',
'wordimage':rootPath+'/js/ueditor/dialogs/wordimage/wordimage.html',
'attachment':rootPath+'/js/ueditor/dialogs/attachment/attachment.html',
'insertframe':rootPath+'/js/ueditor/dialogs/insertframe/insertframe.html',
'edittd':rootPath+'/js/ueditor/dialogs/table/edittd.html',
'snapscreen': rootPath+'/js/ueditor/dialogs/snapscreen/snapscreen.html'
},
其中的rootpath：
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName); //获取主机地址，如： http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos); //获取带"/"的项目名，如：/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
var rootPath = localhostPaht+projectName;
这是我项目所需的路径，依照自己的项目找到正确的插件地址就可以。
上传图片的页面在ueditor\dialogs\image\image.html
修改它的上传处理操作路径：
url:rootPath+'/upload/uploadImage.jsp', //rootPath同上，后面为处理功能的jsp页面。
上传附件的页面在ueditor\dialogs\attachment\attachment.html
修改它的上传处理操作路径：
upload_url:rootPath+'/upload/uploadFile.jsp', //rootPath同上，后面为处理功能的jsp页面。
上传图片和附件功能实现代码放在ueditor\server\upload下，有各4种语言的上传例子，参照修改使用，以上的两个jsp（'/upload/uploadImage.jsp'和 '/upload/uploadFile.jsp',
）就是参照里面的up.jsp做的，基本上不需要有大的改动，主要是把存储路径和访问路径调对，就行。
editor_config.js中的代码
UEDITOR_CONFIG = {
imagePath:rootPath , //图片文件夹所在的路径，用于显示时修正后台返回的图片url！具体图片保存路径需要在后台设置。！important
compressSide:0, //等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度
maxImageSideLength:900, //上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值
relativePath:true, //是否开启相对路径。开启状态下所有本地图片的路径都将以相对路径形式进行保存.强烈建议开启！
filePath:rootPath, //附件文件夹保存路径
catchRemoteImageEnable:true, //是否开启远程图片抓取
catcherUrl:rootPath +"server/submit/php/getRemoteImage.php", //处理远程图片抓取的地址
localDomain:"baidu.com", //本地顶级域名，当开启远程图片抓取时，除此之外的所有其它域名下的图片都将被抓取到本地
imageManagerPath:rootPath+ "server/submit/php/imageManager.php", //图片在线浏览的处理地址
UEDITOR_HOME_URL: rootPath,
up.jsp中的代码
response.getWriter().print(
"{'url':'"+ realPath + "/" + picTo + "','title':'"
+ title + "','state':'" + state + "'}");
editor_config.js中的代码中的 rootPath 和 up.jsp中的代码中的url就是图片的地址，访问的地址，就是把rootPath 转化为域名，这个自己好好调试一下就出来了，附件也和上传图片基本一样。重点还是自己弄清楚自己的路径怎么设置的，才能正确访问到。
jsp页面另一种赋值：
<!-- 文章正文开始 -->
<textarea name="content" id="content" style="width:880px;">${fn:escapeXml(article.content)}</textarea>
<script type="text/javascript">
var editor_a;
document.onreadystatechange = function(){
if(document.readyState=="complete"){
editor_a = new baidu.editor.ui.Editor();
editor_a.render('content');
}
}
</script>
<!-- 文章正文结束 -->
form提交之前或者js验证需要做一个操作：
if(editor_a.hasContents()){ //此处以非空为例
editor_a.sync(); //同步内容
var content=editor_a.getContent();//js得到content值。
}
官方文档可参考：
http://ueditor.baidu.com/website/document.html