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="width: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>

jsp解决kindeditor在线编辑器struts图片上传问题的更多相关文章

  1. kindeditor编辑器和图片上传独立分开的配置细节

    关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...

  2. ASP利用xhEditor编辑器实现图片上传的功能。

    本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...

  3. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  4. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

  5. 关于移动手机端富文本编辑器qeditor图片上传改造

    日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

  6. 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能

    最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...

  7. Java Struts图片上传至指定文件夹并显示图片

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...

  8. Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg

    注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片.   1.下载文件(1) http://drupal.org/proj ...

  9. struts图片上传

    文件上传:三种上传方案1.上传到tomcat服务器 上传图片的存放位置与tomcat服务器的耦合度太高2.上传到指定文件目录,添加服务器与真实目录的映射关系,从而解耦上传文件与tomcat的关系文件服 ...

随机推荐

  1. ASP.NET MVC应用程序展示RDLC报表

    原文:ASP.NET MVC应用程序展示RDLC报表 学习ASP.NET MVC这样久,在学习,练习与应用过程中,觉得很多知识与以前的ASP.NET多有区别,但是实现操作起来,细处又有许多相近的地方. ...

  2. 错误 4 自定义工具错误: 无法生成服务引用“DepartMentService”的代码。请检查其他错

    原文:错误 4 自定义工具错误: 无法生成服务引用"DepartMentService"的代码.请检查其他错 问题:     错误 4 自定义工具错误: 无法生成服务引用" ...

  3. kettle于javascript步骤错误处理

    javascript步骤错误处理 假设你熟悉kettle误差特性转换.你可能想知道javascript步骤如何使用.骤用户界面机制是同样的,在javascript步骤右击,选择"定义错误处理 ...

  4. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  5. 物理引擎Havok教程(一)搭建开发环境

    物理引擎Havok教程(一)搭建开发环境 网上关于Havok的教程实在不多,并且Havok学习起来还是有一定难度的,所以这里写了一个系列教程,希望可以帮到读者.这是第一期. 一.Havok物理引擎简单 ...

  6. php_PHP与Mysql的连接

    展示效果: 繁写: <?php    echo "This is a test</br>";     echo "asdfasdfadsf"; ...

  7. JAVA于Get和Post差异请求

    1. get 离server在对数据的访问.post 它是对server数据的传输. get 请求返回 request - URI 随机信息指出,. Post 请求发送电子邮件.观看新闻或交互式用户发 ...

  8. 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面

    尽管说IE6除了苛刻要求的一部分,我们一直没能考虑,但WIN7内置的浏览器IE8还需要支持. 在本文中,基本这种方法的优点,我个人认为,这是准备少.我们不需要在网上找了很多照片,使材料,你只要准备好了 ...

  9. JDBC连接池的简单实现

    首先解释一下,我在做自己android发育.java web这是我的弱点,就在最近,京东云免费,因此,要折腾几.有一点经验,特别是作为共享. 假设内容的文章是错,还请高手指正. 我在这里web结束,需 ...

  10. 将程序添加到右键菜单和图标(以记事本、UltraEdit为例)

    原文:将程序添加到右键菜单(以记事本.UltraEdit为例) 如何将程序加入右键菜单,这里分别以记事本.UltraEdit为例! 以记事本程序为例: 1. 在运行中输入regedit,打开注册表,找 ...