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="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图片上传问题的更多相关文章
- kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- yii2解决百度编辑器umeditor图片上传问题
作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...
- 关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
- Java Struts图片上传至指定文件夹并显示图片
继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...
- Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg
注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片. 1.下载文件(1) http://drupal.org/proj ...
- struts图片上传
文件上传:三种上传方案1.上传到tomcat服务器 上传图片的存放位置与tomcat服务器的耦合度太高2.上传到指定文件目录,添加服务器与真实目录的映射关系,从而解耦上传文件与tomcat的关系文件服 ...
随机推荐
- PHP操作XML文件学习笔记
原文:PHP操作XML文件学习笔记 XML文件属于标签语言,可以通过自定义标签存储数据,其主要作用也是作为存储数据. 对于XML的操作包括遍历,生成,修改,删除等其他类似的操作.PHP对于XML的操作 ...
- android模拟器与PC的端口映射(转)
阅读目录 一.概述 二.实现步骤 回到顶部 一.概述 Android系统为实现通信将PC电脑IP设置为10.0.2.2,自身设置为127.0.0.1,而PC并没有为Android模拟器系统指定IP,所 ...
- 基于Haar特征Adaboost人脸检测级联分类
基于Haar特征Adaboost人脸检测级联分类 基于Haar特征Adaboost人脸检测级联分类,称haar分类器. 通过这个算法的名字,我们能够看到这个算法事实上包括了几个关键点:Haar特征.A ...
- 2014ACM/ICPC亚洲区域赛牡丹江站汇总
球队内线我也总水平,这所学校得到了前所未有的8地方,因为只有两个少年队.因此,我们13并且可以被分配到的地方,因为13和非常大的数目.据领队谁oj在之上a谁去让更多的冠军.我和tyh,sxk,doub ...
- 四:redis的sets类型 - 相关操作(有序和无序集合)
================四十五种(有序和无序集合):sets种类(它是一个集)============= 简介: set它代表的集合.加入是随意添加----->无序集合 ...
- AspNetPager使用指南
一.AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能 二.AspNetPager支持各种数据绑定控件GridView.DataG ...
- linux_awk_内部正则过滤
awk -F'\t' '{if($3 !~ /^<p><img/){print $0}}' latex500.db|wc -l
- Visual Studio-Sequence Diagram
UML Design Via Visual Studio-Sequence Diagram 本文主要介绍在Visual Studio中设计时序图,内容如下: 何时使用时序图 时序图元素介绍 条件.循环 ...
- STL之sort函数的用法
说明:本文仅供学习交流,转载请标明出处,欢迎转载! STL封装了一个排序算法,该算法相应的头文件为#include<algorithm>,我们能够依据须要对一个数组进行排序或者降序. so ...
- MVC+MQ+WinServices+Lucene.Net
MVC+MQ+WinServices+Lucene.Net Demo 前言: 我之前没有接触过Lucene.Net相关的知识,最近在园子里看到很多大神在分享这块的内容,深受启发.秉着“实践出真知”的精 ...