读书人

运用百度编辑器UEditor小总结

发布时间: 2012-08-14 10:39:57 作者: rapoo

使用百度编辑器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>



注意:
提交的地方 一定要使用它提供的这个方法,因为这里有赋值.

要使得上传图片和附件等功能页面出来,就要调试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 转化为域名,这个自己好好调试一下就出来了,附件也和上传图片基本一样。重点还是自己弄清楚自己的路径怎么设置的,才能正确访问到。













读书人网 >Web前端

热点推荐