zoukankan      html  css  js  c++  java
  • jsp解决kindeditor在线编辑器struts图片上传问题

    1、下载

        官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅  保留en.js和zh_CN.js即可,保留jsp文件夹下的json_upload.jsp文件和 kindeditor.js文件即可,把jsp下面的jar导入

      

    在线编辑器:http://kindeditor.net/
     

     

    2、修改json_upload.jsp

      修改json_upload.jsp文件保存路径即可修改一下两句即可。

      //文件保存目录路径
      String savePath = pageContext.getServletContext().getRealPath("/upload");

      //文件保存目录URL,此处为绝对路径
      String saveUrl  = request.getContextPath()+"/upload";

     3、可选

      obj.put("url", request.getContextPath()+"/img/" + newFileName);//修改返回到编辑器显示的图片

    4、在plugins/images/image.js修改

              uploadJson = K.undef(self.uploadJson, self.basePath + 'jsp/upload_json.jsp')

    5、在plugins/filemanager/filemanager.js修改

            fileManagerJson = K.undef(self.fileManagerJson, self.basePath + 'jsp/file_manager_json.jsp'),

    6、jsp中

      <link rel="stylesheet" href="<%=application.getContextPath() %>/themes/default/default.css" />
        <script charset="utf-8" src="<%=application.getContextPath() %>/js/kindeditor.js"></script>
        <script charset="utf-8" src="<%=application.getContextPath() %>/lang/zh_CN.js"></script>

      <script charset="utf-8" src="<%=application.getContextPath() %>/lang/zh_CN.js"></script>
                  <script>
                var editor;
                KindEditor.ready(function(K) {
                    editor = K.create('textarea[id="content"]', {
                        filterMode:false,
                        resizeType : 1,
                        allowPreviewEmoticons : true,
                        allowImageUpload : true,
                        items : [
                            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                            'insertunorderedlist', '|', 'emoticons', 'image', 'link']
                        
                        });
                    K('input[name=submit]').click(function(e) {
                        editor.value=editor.text();
                    });
                });
            </script>

           <textarea  tabindex="4"  name="brand.content" id="content" style="80.2%"></textarea>

    ----------------------------struts----------------------------------------------------

    1、struts直接<url-pattern>/*</url-pattern>会拦截了在线编辑器的url,所以需要进行下面的配置,这个只是解决那个问题的其中一种

    2、自定义filter

    public class KindeditorUrlFilter extends StrutsPrepareAndExecuteFilter {

        @Override
        public void doFilter(ServletRequest req, ServletResponse res,
                FilterChain chain) throws IOException, ServletException {
            
            HttpServletRequest request = (HttpServletRequest) req;    
               //不过滤的url    
               String url = request.getServletPath();  
               
               if ("/js/jsp/file_manager_json.jsp".equals(url)) {     
                    
                   chain.doFilter(req, res);    
               }else if("/js/jsp/upload_json.jsp".equals(url)){  
                   chain.doFilter(req, res);  
               }else{    
                   //System.out.println("使用默认的过滤器");    
                   super.doFilter(req, res, chain);    
               }    
        }
    }

    3、web.xml配置filter

    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>com.dan.action.KindeditorUrlFilter</filter-class>
      </filter>
      <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>

  • 相关阅读:
    Linux下autoconf和automake使用
    (转)跟我一起写MAKEFILE
    软件源(Software Sources)
    我的攒机(zuosi)过程
    《软件可靠性方法》笔记(一)---第二章 预备知识
    初识java泛型
    配置React Native的开发环境
    IOS原生方法实现二维码生成与扫描
    12个非常不错的免费HTML后台管理模板
    iOS 集成银联支付
  • 原文地址:https://www.cnblogs.com/danmao/p/4190611.html
Copyright © 2011-2022 走看看