CKEditor与CKFinder整合 jsp页面
来源:互联网 发布:商城app源码下载 编辑:程序博客网 时间:2024/04/28 07:05
第一次刚接触富文本编辑器时用的就是CKEditor的一个很老的版本 后来接触了百度的UEditor 使用了一段时间 再后来使用了wangEditor(使用起来很简单) 这段时间看别人源码的时候发现了ckfinder从昨天开始 在网上找文章 对比了5 6 篇文章每次都是卡在了 CKFinder查看文件出错 今天又看了一下网上相关的资料解决了这个问题 先看一下效果图
准备工作:
1.下载ckeditor和ckfinder
ckeditor
http://ckeditor.com/download
ckfinder
https://cksource.com/ckfinder/download
2.创建项目
3.1将下载解压后ckeditor引入项目
3.2将下载解压后ckfinder引入项目
不建议重命名ckeditor和ckfinder文件夹,可以将ckeditor的samples目录和CHANGES.md,README.md,和LICENSE.md删掉,将ckfinder的_samples目录,changelog.txt,install.txt和license.txt删掉。
4.2引入ckeditor js文件
<script type="text/javascript" src="${ctxp}ckeditor/ckeditor.js"></script>
4.2.1创建一个textarea
<form><!-- 一个textarea --><textarea name="editor1" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea></form>
4.2.2通过ckeditor来操作textarea
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
4.1引入ckfinder js文件
<script type="text/javascript" src="${ctxp }ckfinder/ckfinder.js"></script>
4.1.2通过ckeditor来操作editor
<span style="font-family:SimHei;font-size:14px;"><script type="text/javascript">var editor = CKEDITOR.replace('editor1');CKFinder.setupCKEditor(editor, '${ctxp }ckfinder/');</script></span>
jsp完整代码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="/WEB-INF/include/taglib.jsp"%><html><head><!-- 引入ckeditor.js和ckfinder.js --><script type="text/javascript" src="${ctxp}ckeditor/ckeditor.js"></script><script type="text/javascript" src="${ctxp }ckfinder/ckfinder.js"></script><title>ckeditor</title></head><body><form><!-- 一个textarea --><textarea name="editor1" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea></form><!-- 将id为editor1的textarea用ckeditor来操作 --><script type="text/javascript">var editor = CKEDITOR.replace('editor1');CKFinder.setupCKEditor(editor, '${ctxp }ckfinder/');</script></body></html>
将CKEditor与CKFinder整合
将config.xml拷入项目WEB-INF下将名字修改为ckfinder.xml在web.xml最后面加上如下的配置
<!-- =================ckeditor+ckfinder图片上传功能的配置=================== --><!-- ckfinder --><servlet><servlet-name>ConnectorServlet</servlet-name><servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class><init-param><description> Path to configuration file can be relative path inside application, absolute path on local file system or UNC path. </description><param-name>XMLConfig</param-name><param-value>/WEB-INF/ckfinder.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>true</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern> /static/plugins/ckfinder/core/connector/java/connector.java </url-pattern></servlet-mapping><filter><filter-name>FileUploadFilter</filter-name><filter-class>com.ckfinder.connector.FileUploadFilter</filter-class><init-param><param-name>sessionCookieName</param-name><param-value>JSESSIONID</param-value></init-param><init-param><param-name>sessionParameterName</param-name><param-value>jsessionid</param-value></init-param></filter><filter-mapping><filter-name>FileUploadFilter</filter-name><url-pattern> /static/plugins/ckfinder/core/connector/java/connector.java </url-pattern></filter-mapping>
注意对应关系
将需要的jar包导入项目 这里使用maven
<!-- ckeditor --><dependency><groupId>com.ckeditor</groupId><artifactId>ckeditor-java-core</artifactId><version>3.5.3</version></dependency><!-- CKFinder begin --><dependency><groupId>net.coobird</groupId><artifactId>thumbnailator</artifactId><version>0.4.2</version></dependency><dependency><groupId>com.ckfinder</groupId><artifactId>apache-ant-zip</artifactId><version>2.3</version></dependency><dependency><groupId>com.ckfinder</groupId><artifactId>ckfinder</artifactId><version>2.3</version></dependency><dependency><groupId>com.ckfinder</groupId><artifactId>ckfinderplugin-fileeditor</artifactId><version>2.3</version></dependency><dependency><groupId>com.ckfinder</groupId><artifactId>ckfinderplugin-imageresize</artifactId><version>2.3</version></dependency><!-- CKFinder end -->
注意事项
ckfinder.xml
将config标签下的第一个子标签enabled设置为true
<enabled>true</enabled>
默认配置如下将文件存放路径可以将其改为我们的地址
<baseURL>/userfiles/</baseURL>
完成操作 运行效果图
- CKEditor与CKFinder整合 jsp页面
- 页面编辑器CKEditor与CKFinder整合
- CKEditor与CKFinder整合
- CKEditor+CKFinder+jsp整合配置
- ckeditor与ckfinder的整合
- S2SH与ckeditor+ckfinder整合笔记
- CKEditor与CKFinder学习--整合SpringMVC
- CKEditor + CKFinder 整合笔记
- yii 整合 ckeditor,ckfinder
- CkEditor+CKFinder整合方法
- Ckeditor+Ckfinder+Ext4 整合
- Ckeditor+Ckfinder+Ext4 整合
- CKEditor与CKFinder整合并实现文件上传功能
- Ckeditor与Ckfinder整合 上传图片功能(.net版本)
- CKEditor与CKFinder整合并实现文件上传功能
- ckfinder整合ckeditor(java版本)
- CKEditor+CKFinder+jsp的整理
- CKEditor+CKFinder+jsp的整理
- Linux unzip --解压zip文件
- iOS webservice整理
- Spring Aop相关问题
- 资源加载问题
- android悬浮窗口的实现
- CKEditor与CKFinder整合 jsp页面
- leetcode_086 Partition List
- 认识自己
- Linux uptime --显示系统运行时间
- mysql安装卸载乱码等问题
- (OpenCV)SVM:从理论到OpenCV实践
- lintCode(453)——将二叉树拆分成链表
- 多线程的3中实现方式,以及有返回值线程池Demo
- 将dic里的数据写到model里,自动处理null数据