上个项目用过的知识点总计:
一.需要的资源:
用到的网站,文件自己下载:
a) ckeditor_3.6.2 (解压)
b) ckeditor-java-3.6.2 (解压)
c) ckfinder_java_2.1 (解压)
推荐到官网下载最新版本 :http://ckeditor.com/download
二. 执行步骤:
1. MyEclipse新建 Web Project : CKEditor_Finder
2. 复制以下文件夹到WebRoot下面:
ckfinder_java_2.1\ckfinder\ CKFinderJava \ckfinder
注意:CKFinder 加粗的是 war 包解压后的文件夹的名称
ckeditor_3.6.2/ckeditor
3. 复制 CKFinder配置文件 到WEB-INF 下面:
ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml
4. 复制下面文件夹下面所有jar 文件到 WEB-INf/lib 下面:
ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib
ckeditor-java-3.6.2\WEB-INF\lib
三. 下面删除无用的文件
首先是ckeditor 下面的文件:
_sample,_source, CHANGES.html, ckeditor_php4.php , ckeditor_php5.php,
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html
然后是ckfinder 下面的文件:
_samples, help, changelog.txt, install.txt, license.txt, translation.txt
四. 修改配置文件WEB-INF下config.xml
<!-- 默认为false的改为true -->
<enabled >true </enabled>
//指定上传文件或者图片的保存地址 :CKEditor_Finder为项目名,改为你自己的。
<baseURL >/CKEditor_Finder/userfiles/ </ baseURL >
五. 在web.xml 中增加如下代码:
<!-- 图片管理功能的配置 -->
<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>/ckfinder/core/connector/java/connector.java</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
com.ckfinder.connector.ConnectorServlet
</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
<!-- 图片管理功能的配置结束 -->
六. 修改ckeditor/config.js文件的内容
CKEDITOR.editorConfig = function (config) {
config.filebrowserBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html' ;
config.filebrowserImageBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;
config.filebrowserFlashBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash' ;
config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;
config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;
config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
config.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700';
config.language = "zh-cn" ;
};
七. 修改index.jsp文件的内容如下:
<%@ page language = "java" import = "java.util.*" pageEncoding = "utf-8" %>
<%@ taglib uri = "http://ckfinder.com" prefix = "ckfinder" %>
<%@ taglib uri = "http://ckeditor.com" prefix = "ckeditor" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;
%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
< head >
< base href = " <%= basePath %> " >
< title > 首页 </ title >
< meta http-equiv = "pragma" content = "no-cache" >
< meta http-equiv = "cache-control" content = "no-cache" >
< meta http-equiv = "expires" content = "0" >
</head>
<body>
< form action = "getContent" method = "get" >
< textarea cols = "80" id = "editor1" name = "editor1" rows = "10" ></ textarea >
< input type = "submit" value = "Submit" />
</ form >
< ckfinder:setupCKEditor basePath = "/CKEditor_Finder/ckfinder/" editor = "editor1" />
< ckeditor:replace replace = "editor1" basePath = "/CKEditor_Finder/ckeditor/" />
</body>
</html>
修改tomcat配置文件URIEncoding="utf-8" 设置中的URIEncoding 是为了在访问的时候,即使访问路径中出现中文也能正常访问.
<Connector port="80" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="utf-8" />
重点:
注意:如果用到struts2,图片上传没反应的话。这点把上传的请求也拦截过滤掉了
把
<filter-mapping>
<filter-name>Struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
改成
<filter-mapping>
<filter-name>Struts2</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
相关推荐
CKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ...
《基于CKEditor、JSP、Struts2与JSON的图片上传技术详解》 在Web开发中,用户交互体验是至关重要的,尤其是涉及到内容编辑时,一个功能强大的富文本编辑器可以大大提高用户的操作便利性。CKEditor就是这样一款常用...
- 配置CKFinder以支持图片、Flash等文件的上传。这通常涉及到修改CKFinder的配置文件,比如 `config.php`,设定允许上传的文件类型、大小限制,以及存储路径等。 5. **Ckfinder 实现普通文件上传**: - 通过...
CKEditor和CKFinder是两个非常流行的开源Web编辑器和文件管理工具,它们在.NET环境中有着广泛的应用。CKEditor是一款功能强大的HTML文本编辑器,而CKFinder则是一个用于管理和上传文件的用户界面,常与CKEditor搭配...
ckeditor+ckfinder,很强大的文本编辑器。所有东西已配置好,直接解压后放到网站根目录下就可以使用,可以上传图片,flash等。
CKFinder 2.1 是与CKEditor配套使用的文件管理工具,用于上传、浏览和管理编辑器中使用的图片、文档和其他媒体文件。它提供了用户友好的界面,便于用户查找和插入到CKEditor中的资源。CKFinder 支持多种文件类型,...
CKedit是一款流行的开源JavaScript富文本编辑器,它提供了丰富的文本格式化选项,图片上传、链接管理等功能,广泛应用于网页内容编辑场景。在Java后台开发中,我们需要理解如何将CKedit与服务器进行交互,实现数据的...
CKEditor是一款流行的开源富文本编辑器,而CKFinder则是一个文件管理和上传组件,它们常常搭配使用,为用户提供了一个全面的内容创作和管理环境。 CKEditor 3.6.2是CKEditor的一个旧版本,但仍然具有很高的实用性。...
CKEditor内置了图片上传功能,允许用户在编辑过程中直接将本地图片上传到服务器。用户只需点击编辑器中的图片插入按钮,选择图片文件,即可完成上传。同时,CKEditor还支持图片的预览、裁剪和调整大小,使得在网页上...
CKfind支持多语言,且与CKedit整合良好,用户可以直接在编辑器内插入从CKfind选取的图片或文件。其安全性也是一大亮点,可以设置访问权限,限制不同用户对文件系统的操作范围,确保数据安全。 两者结合使用的优势:...
4. **反馈结果**:上传完成后,编辑器应能显示上传成功的提示,或者如果上传失败,显示错误信息。这需要与后端返回的响应进行交互处理。 5. **安全考虑**:确保文件上传的安全性至关重要,防止恶意文件上传和DoS...
2. **创建上传插件**:开发或获取一个名为"imageupload"的插件,它应该包含用于选择图片、创建上传请求、接收响应以及将图片插入编辑器的逻辑。 3. **前端界面**:设计一个用户友好的界面,允许用户选择多张图片。...
这个编辑器广泛应用于网站、博客、论坛和其他在线内容管理系统,因为它能提供类似于桌面文字处理软件的编辑环境,使得用户在浏览器上也能进行复杂的文本格式化和内容编辑。 CKEditor的核心特性包括: 1. **所见即...
直接放置在tomcat下,访问index.jsp
CKEditor 是一款功能强大的富文本编辑器,广泛应用于网站内容管理、博客系统、论坛等在线文本输入场景。它提供了一套完善的API,允许开发者进行高度自定义,以满足不同项目的需求。CKEditor 支持多种格式的文本编辑...
在很多场景下,尤其是内容管理系统(CMS)中,能够直接在编辑器内上传图片或多媒体文件是一项重要的需求。 #### 二、配置CKEditor实现上传功能 ##### 1. 配置config.js 为了使CKEditor具备上传图片的功能,首先...
网站中可能需要发布一些视频,比如介绍产品或者一些新闻等视频,如果网站后台使用的编辑器为ckeditor或者ckeditor+ckfinder,就需要ckeditor的一些插件来发布我们的视频,视频播放器使用的是jwplayer 使用方法: 1、...
2. **插件生态系统**:拥有庞大的插件库,涵盖了从基本的格式化到复杂的集成(如图片管理、公式编辑)等各种功能。 3. **多语言支持**:支持多种语言,方便国际化的网站使用。 4. **WYSIWYG**:所见即所得的编辑体验...