使用百度编辑器UEditor小总结
百度编辑器UEditor 下载:
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>
//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' },
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;
url:rootPath+'/upload/uploadImage.jsp',//rootPath同上,后面为处理功能的jsp页面。
upload_url:rootPath+'/upload/uploadFile.jsp', //rootPath同上,后面为处理功能的jsp页面。
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,
response.getWriter().print("{'url':'"+ realPath + "/" + picTo + "','title':'"+ title + "','state':'" + state + "'}");