码迷,mamicode.com
首页 > 数据库 > 详细

SSH系统下,Ueditor1.4.3编辑器配置,增加图片删除功能+数据库存储

时间:2015-04-22 20:31:08      阅读:853      评论:0      收藏:0      [点我收藏+]

标签:

版本说明:Ueditor编辑器 1.4.3JSP、UTF-8版本
菜鸟使用途中遇到很多困难,在网上不停的找解答方法,整理出来可供使用,有好的建议就更好了。
我的目标:
  • Ueditor编辑器嵌入到自己原来的项目中;
  • 只能添加不能删除图片,无用资源占用空间极不合理,所以在多图上传->在线管理添加了删除图片的功能;
  • 把编辑器编辑的内容存储到Oracle数据库
步骤
一、在JSP界面上添加Ueditor编辑器
下载官网: http://ueditor.baidu.com/website/download.html 
下载文本后后解压,把整个ueditor1_4_3-utf8-jsp文件夹粘贴到项目/Webroot/js下,文件夹改名为ueditor。 
  1. ueditor\jsp\lib下面5个jar包剪切到项目的lib包下,特别注意其中2个jar包:commons-io-2.4.jar项目中不得有比他版本低的jar包,如commons-io-1.x.jar或2.0.jar,低版本一定要删除;ueditor-1.1.1.jar官方本身此jar包就有问题,用的是绝对路径而不是相对路径。附件如下ueditor-1.1.1.jar |||||||注意:ueditor-1.1.1.jar这个解决方法是从《jsp版ueditor图片在线管理返回绝对路径》这篇文章上学习,它的jar是JRE1.7编译,而我的是1.6,不兼容。附件我用jre1.6编译的,如果想用1.7,请看原文章。
  2. 在想要嵌入编辑器的JSP文件引入如下代码
    1 <script type="text/javascript" src="${ctx}/js/ueditor/ueditor.config.js"></script>
    2  <script type="text/javascript" src="${ctx}/js/ueditor/ueditor.all.min.js"></script>
    3 <link rel=stylesheet href="${ctx}/js/ueditor/themes/default/css/ueditor.css">
  3. 在<body></body>你想要的位置添加编辑器
    1 <script id="editor" type="text/plain" style="width:800px;height:500px;">内容,或从数据库读取</script>   

    同时其中添加下面代码,实例化编辑器

    1 <script type="text/javascript">    
    2     //实例化编辑器
    3     </span>var ue = UE.getEditor(‘editor‘);
    4 </script>

   这时候就可以在界面看到编辑器了。

 

二、配置编辑器,上传图片和文件等

  1. ueditor.config.js中toolbars内容代表了将要显示出来的功能,如字体颜色、字号等,不想要的可以自行注释。
  2. 配置图片文件路径:ueditor.config.js中把注释内容window.UEDITOR_HOME_URL = "/xxxx/xxxx/";修改为
    1 "window.UEDITOR_HOME_URL =/项目名字/js/ueditor/";
    即ueditor文件夹的路径,同时去除注释。
  3. ueditor\jsp\config.json中,图片上传路径
    1 "imageUrlPrefix": "/改成项目名字", /* 图片访问路径前缀 */
    2 "imagePathFormat": "/js/ueditor/upload/image/{yyyy}-{mm}-{dd}/{time}_{rand:6}_{filename}", /* 图片存储路径,以及命名方式 */
    同理config.json下其他的都改了,上传文件、列出指定目录下的图片或文件等。
  4. 尝试上传图片,成功。若失败,查看tomcat下部署的文件夹下是否存在该图片,再分析原因。Ueditor图片不显示的一个原因:上传的图片名字是汉字。

 

三、存储编辑内容

  1. JSP界面设置保存按钮,
    1 var editorText = $.trim(UE.getEditor(‘editor‘).getContent());
    点击保存触发ajax事件,传递数据editorText到Web层XXXXaction.java,然后调用Service层,再到Dao层等一些流程。
  2. 存储方面的问题:由于数据量过大,因此oracle数据库采用clob类型的字段。Dao层的SQL语句是update语句,语句过长Oracle报错ORA-1704:string literal too long。困扰了我好久,网上说的办法
    1 declare  v_clob clob :=‘大数据‘;
    2 begin  insert into EDITOR values (‘2‘, v_clob);
    3 end;

    也也不行,最终方案:把数据截开,例如截成4段,第一段update

    1 declare
    2   v_clob clob := ‘大数据‘
    3 begin
    4   update EDITOR set EDITOR_TEXT = EDITOR_TEXT where XXX;
    5 end;  

    后面几段

    1 declare
    2   v_clob clob := ‘大数据‘
    3 begin
    4   update EDITOR set EDITOR_TEXT = EDITOR_TEXT||v_clob where XXX;
    5 end;  

    成功。

  3. 存储编辑器内容时,&nbsp之类的,即&XX不能存储。处理方法:用特殊字符替代&,后期读取的时候再替换回来。界面不允许输入该特殊字符

 

四、UEditor多图上传->在线管理添加了删除图片的功能。同理文件删除可用

 

  1. 在ueditor->dialogs->image->image.html添加代码
    技术分享
     1 <script>
     2     //新增在线管理删除图片
     3     function uedel(path, id){
     4         if(confirm(‘您确定要删除它吗?删除后不可恢复!‘)){              
     5             //var url = editor.getOpt(‘imageDelUrl‘);
     6         deleteFile(path);
     7             var url = editor.getOpt(‘imageDelUrl‘);   
     8             $.get(url,{‘path‘:path},function(data){
     9                 if (data.state == ‘success‘) {
    10                     alert(data.message);
    11                     $("#"+id).parent("li").remove();                   
    12                 }else{
    13                     alert(data.message);
    14                 }
    15             },‘json‘);            
    16         }        
    17     } 
    18    function deleteFile(path){
    19         $.ajax({
    20             type:‘POST‘,
    21             url:editor.getOpt(‘imageDelUrl‘)+‘action路径:你项目Web层处理的方法路径!deleteFile.action‘,
    22             data:{pathName : path},
    23             cache:false,
    24             timeout:6000,
    25             error: function (XMLHttpRequest, textStatus, errorThrown) {
    26                 alert(‘删除失败‘);
    27             },
    28             success:function(){
    29                 alert(‘删除成功!请点击保存,查看是否误删!‘);
    30                 location.reload();
    31             }                        
    32         });        
    33     }
    34     </script>
    技术分享

     

  2. ueditor\jsp\config.json中添加代码
    1 /*删除指定目录下的文件或图片*/
    2      "imageDelUrl":"/项目名字",
  3. WEB层处理方法.java添加下面的方法
    技术分享
     1     public void deleteFile(){
     2         //图片和文件管理中的删除        
     3         String path = ServletActionContext.getServletContext().getRealPath("").replaceAll("\\\\", "/");
     4         System.out.println("========================================path:"+path);
     5         HttpServletRequest request = Struts2Utils.getRequest();
     6         String pathName = this.getQueryParameter(request, "pathName");            
     7                String filePath = path  + pathName;      
     8         File file = new File(filePath);
     9         // 如果文件路径所对应的文件存在,并且是一个文件,则直接删除
    10         if (file.exists()) {
    11             file.delete();
    12             System.out.println("删除成功");            
    13         } else {            
    14             System.out.println("文件不存在");
    15         }
    16     }
    技术分享

五、调试小技巧

  Chrome浏览器 Ctrl+Shift+N进入隐身模式,不用再担心JS缓存造成的影响。

SSH系统下,Ueditor1.4.3编辑器配置,增加图片删除功能+数据库存储

标签:

原文地址:http://www.cnblogs.com/tuziv5/p/4448414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!