kindeditor在线编辑器配置上传文件功能及使用
2015-05-01 00:00
218 查看
JSP页面配置:
<tr>
<td style="text-align: right; font-size: 16px;">简介:</td>
<td colspan="5">
<textarea rows="3" name="intro" id="intro" style="width:98%;visibility:hidden;"></textarea>
</td>
</tr>
JS文件配置:
editor = KindEditor.create('textarea[name="intro"]', {
height:'600px',
cssPath : $('#basePath').val() +'resources/kindeditor/plugins/code/prettify.css',
uploadJson : $('#basePath').val() +'resources/kindeditor/jsp/upload_json.jsp',
fileManagerJson : $('#basePath').val() +'resources/kindeditor/jsp/file_manager_json.jsp',
resizeType : 1,
allowFileManager : true
});
下面是文件上传的详细配置,二者结合就可以实现文本编辑的强大效果啦!
kindeditor在线编辑器的上传功能是以插件的形式附加到编辑器上的。此编辑器可以自己制作插件来加上自己想要的功能。常见的功能官方插件都已经给做好了,所以我们直接使用起来会更方便。
1.我们把插件自带的插件全部放入和kindeditor同等级的目录下面,如图:
![](http://f.hiphotos.baidu.com/exp/w=500/sign=fd71739a0ff3d7ca0cf63f76c21ebe3c/b17eca8065380cd7f4709649a244ad3459828123.jpg)
2.找到对应的后台处理程序(个人以jsp为例,因为正在做一个jsp项目):
![](http://f.hiphotos.baidu.com/exp/w=500/sign=2860fc6eac51f3dec3b2b964a4eff0ec/314e251f95cad1c812f0c8837c3e6709c83d51ce.jpg)
3.打开
jsp文件夹,如图一所示结构。将lib下面的jar引入项目,如果以前存在对应jar则选用较高版本(jar包为java的类库包)。
![](http://h.hiphotos.baidu.co<br/>4000<br/>m/exp/w=500/sign=5e2ba8788913632715edc233a18ea056/6159252dd42a28347b6f02af58b5c9ea14cebf4c.jpg)
4.然后将file_manager_json.jsp和upload_json.jsp放入对应文件夹,能找到就行。这两个为后台处理程序。如图
![](http://e.hiphotos.baidu.com/exp/w=500/sign=076408a78444ebf86d71643fe9f8d736/d1a20cf431adcbef1a0d4fa2afaf2edda3cc9f5c.jpg)
5.打开file_manager_json.jsp。找到//根目录路径,可以指定绝对路径,比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录,以上是我的。如图所示我的文件结构:
![](http://a.hiphotos.baidu.com/exp/w=500/sign=99588342247f9e2f70351d082f31e962/08f790529822720e3420d35e78cb0a46f31faba3.jpg)
6.打开upload_json.jsp。找到//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录,以上是我的。相当于和第五步一样。
7.现在找到自己的kindeditor进行相应的配置。实际上就是找到后台的这两个文件。
在初始化配置中加上:uploadJson : '<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
加粗改为自己对应的。如图为我的完整配置:
![](http://a.hiphotos.baidu.com/exp/w=500/sign=a7fd941ba3ec08fa260013a769ec3d4d/023b5bb5c9ea15ce662dd0adb5003af33b87b256.jpg)
8.现在应该配置具体的插件了,我以image图片处理插件为例子。找到图片插件目录。如图路径:
![](http://d.hiphotos.baidu.com/exp/w=500/sign=cae0dbc0554e9258a63486eeac83d1d1/c9fcc3cec3fdfc035186d01cd73f8794a5c22693.jpg)
9.打开image.js,找到uploadJson = K.undef(self.uploadJson, self.basePath + 'file_manager_json.jsp'),
加粗的路径最好设置为正确的。(这两个地址最好改成正确的,如果不能正确也可以使用,但是当你主配置地址出错了就不能使用了,我推测是这样的)然后在后台对应的upload下面创建image文件夹,(image是默认名字,还有几个默认名字:file(文件),media(视频),flash(动画))如果你想用别的名字,你就需要在对应的程序进行文件名的修改。没有这个必要吧。
![](http://d.hiphotos.baidu.com/exp/w=500/sign=38ed4656d662853592e0d221a0ee76f2/18d8bc3eb13533fa2136af8aabd3fd1f40345b95.jpg)
10.这样就配置好了。
11如果是别的插件重复8--10的步骤就可以了。
<tr>
<td style="text-align: right; font-size: 16px;">简介:</td>
<td colspan="5">
<textarea rows="3" name="intro" id="intro" style="width:98%;visibility:hidden;"></textarea>
</td>
</tr>
JS文件配置:
editor = KindEditor.create('textarea[name="intro"]', {
height:'600px',
cssPath : $('#basePath').val() +'resources/kindeditor/plugins/code/prettify.css',
uploadJson : $('#basePath').val() +'resources/kindeditor/jsp/upload_json.jsp',
fileManagerJson : $('#basePath').val() +'resources/kindeditor/jsp/file_manager_json.jsp',
resizeType : 1,
allowFileManager : true
});
下面是文件上传的详细配置,二者结合就可以实现文本编辑的强大效果啦!
kindeditor在线编辑器的上传功能是以插件的形式附加到编辑器上的。此编辑器可以自己制作插件来加上自己想要的功能。常见的功能官方插件都已经给做好了,所以我们直接使用起来会更方便。
方法/步骤
1.我们把插件自带的插件全部放入和kindeditor同等级的目录下面,如图:![](http://f.hiphotos.baidu.com/exp/w=500/sign=fd71739a0ff3d7ca0cf63f76c21ebe3c/b17eca8065380cd7f4709649a244ad3459828123.jpg)
2.找到对应的后台处理程序(个人以jsp为例,因为正在做一个jsp项目):
![](http://f.hiphotos.baidu.com/exp/w=500/sign=2860fc6eac51f3dec3b2b964a4eff0ec/314e251f95cad1c812f0c8837c3e6709c83d51ce.jpg)
3.打开
jsp文件夹,如图一所示结构。将lib下面的jar引入项目,如果以前存在对应jar则选用较高版本(jar包为java的类库包)。
![](http://h.hiphotos.baidu.co<br/>4000<br/>m/exp/w=500/sign=5e2ba8788913632715edc233a18ea056/6159252dd42a28347b6f02af58b5c9ea14cebf4c.jpg)
4.然后将file_manager_json.jsp和upload_json.jsp放入对应文件夹,能找到就行。这两个为后台处理程序。如图
![](http://e.hiphotos.baidu.com/exp/w=500/sign=076408a78444ebf86d71643fe9f8d736/d1a20cf431adcbef1a0d4fa2afaf2edda3cc9f5c.jpg)
5.打开file_manager_json.jsp。找到//根目录路径,可以指定绝对路径,比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录,以上是我的。如图所示我的文件结构:
![](http://a.hiphotos.baidu.com/exp/w=500/sign=99588342247f9e2f70351d082f31e962/08f790529822720e3420d35e78cb0a46f31faba3.jpg)
6.打开upload_json.jsp。找到//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录,以上是我的。相当于和第五步一样。
7.现在找到自己的kindeditor进行相应的配置。实际上就是找到后台的这两个文件。
在初始化配置中加上:uploadJson : '<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
加粗改为自己对应的。如图为我的完整配置:
![](http://a.hiphotos.baidu.com/exp/w=500/sign=a7fd941ba3ec08fa260013a769ec3d4d/023b5bb5c9ea15ce662dd0adb5003af33b87b256.jpg)
8.现在应该配置具体的插件了,我以image图片处理插件为例子。找到图片插件目录。如图路径:
![](http://d.hiphotos.baidu.com/exp/w=500/sign=cae0dbc0554e9258a63486eeac83d1d1/c9fcc3cec3fdfc035186d01cd73f8794a5c22693.jpg)
9.打开image.js,找到uploadJson = K.undef(self.uploadJson, self.basePath + 'file_manager_json.jsp'),
加粗的路径最好设置为正确的。(这两个地址最好改成正确的,如果不能正确也可以使用,但是当你主配置地址出错了就不能使用了,我推测是这样的)然后在后台对应的upload下面创建image文件夹,(image是默认名字,还有几个默认名字:file(文件),media(视频),flash(动画))如果你想用别的名字,你就需要在对应的程序进行文件名的修改。没有这个必要吧。
![](http://d.hiphotos.baidu.com/exp/w=500/sign=38ed4656d662853592e0d221a0ee76f2/18d8bc3eb13533fa2136af8aabd3fd1f40345b95.jpg)
10.这样就配置好了。
11如果是别的插件重复8--10的步骤就可以了。
相关文章推荐
- FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置、功能扩展(如自定义文件上传子目录、自定义文件名、上传图片的后期处理等)、以及安全性进行初步的阐述。
- FCKeditor 2.5 使用方法 配置ASP上传功能
- .net中使用Flash上传文件时的Web.Config的配置注意,精
- WebWork之--使用fileUpload interceptor实现文件上传[基本配置+注意事项]
- 使用.net FtpWebRequest 实现FTP常用功能 上传 下载 获取文件列表 移动 切换目录 改名
- 单独使用fckeditor的文件上传功能
- 使用XML读写删除功能来实现资源文件配置
- 使用XML读写删除功能来实现资源文件配置
- FCKeditor的常用配置方法和无法使用上传功能的解决!
- [CKEditor那点事儿]使用java开发ckeditor的文件上传功能
- [CKEditor那点事儿]使用java开发ckeditor的文件上传功能
- 使用Flex实现FTP文件上传功能
- 使用java开发ckeditor的文件上传功能(一)
- spring mvc 配置文件写好后写上传功能
- [Android开发]Android之使用Http协议实现文件上传功能
- FastDFS的配置、部署与API使用解读(2)以字节方式上传文件的客户端代码
- FastDFS的配置、部署与API使用解读(3)以流的方式上传文件的客户端代码
- ckeditor组合ckfinder的配置使用图片上传功能
- CKEditor使用及开启文件上传功能(Servlet实现)
- FastDFS的配置、部署与API使用解读(8)FastDFS多种文件上传接口详解