JSP+ckeditor_4.4.7+ckfinder_2.4.1的使用(一)
本文主要介绍JSP页面，使用富文本编辑器Ckeditor4.4.7+Ckfinder_java_2.4.1实现图片上传，下篇文章将主要介绍实现代码高亮！（可坑死爹了！）
（一）当然是工具下载了（省略eclipse下新建项目过程...）
Ckeditor_4.4.7_full下载地址：http://pan.baidu.com/s/1pJkeBW3
Ckfinder_java_2.4.1下载地址：http://pan.baidu.com/s/1c0pkJOO
（二）解压与配置
1.解压Ckeditor_4.4.7_full.zip，然后打开Ckeditor_4.4.7_full文件夹下的子文件夹ckeditor（这就是咱们所需要的东西了），你可以选择把不需要的东西给删除（红色标识部分）：
然后把ckeditor文件夹复制到Web工程下，与WEB-INF处于同一级目录：（eclipse下是放在/WebContent下）
2.解压Ckfinder_java_2.4.1.zip，然后打开Ckfinder_java_2.4.1文件夹下的子文件夹ckfinder（目标文件）：
然后解压CKFinderJava-2.4.1.war，使用普通解压缩工具就可以了（WinRAR等），打开解压后的CKFinderJava-2.4.1文件夹下WEB-INF中的jar包复制到Web工程下/WebContent/WEB-INF/lib下，将Ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夹拷贝至web工程下，与ckeditor保持同级，然后将其下的WEB- INF下面的config.xml文件拷贝至web项目的WEB-INF下，并根据自己的项目稍作调整即可，如下：
<config> <enabled>true</enabled> <baseDir></baseDir> <baseURL>/Web工程名字/UploadFiles/</baseURL> <licenseKey></licenseKey> <licenseName></licenseName> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <uriEncoding>UTF-8</uriEncoding> <forceASCII>false</forceASCII> <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar> <checkDoubleExtension>true</checkDoubleExtension> <checkSizeAfterScaling>true</checkSizeAfterScaling> <secureImageUploads>true</secureImageUploads> <htmlExtensions>html,htm,xml,js</htmlExtensions> <hideFolders> <folder>.svn</folder> <folder>CVS</folder> </hideFolders> <hideFiles> <file>.*</file> </hideFiles> <defaultResourceTypes></defaultResourceTypes> <types> <type name="Files"> <url>%BASE_URL%files/</url> <directory>%BASE_DIR%files</directory> <maxSize>0</maxSize> <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip </allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Images"> <url>%BASE_URL%images/</url> <directory>%BASE_DIR%images</directory> <maxSize>0</maxSize> <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Flash"> <url>%BASE_URL%flash/</url> <directory>%BASE_DIR%flash</directory> <maxSize>0</maxSize> <allowedExtensions>swf,flv</allowedExtensions> <deniedExtensions></deniedExtensions> </type> </types> <accessControls> <accessControl> <role>*</role> <resourceType>*</resourceType> <folder>/</folder> <folderView>true</folderView> <folderCreate>true</folderCreate> <folderRename>true</folderRename> <folderDelete>true</folderDelete> <fileView>true</fileView> <fileUpload>true</fileUpload> <fileRename>true</fileRename> <fileDelete>true</fileDelete> </accessControl> </accessControls> <thumbs> <enabled>true</enabled> <url>%BASE_URL%_thumbs/</url> <directory>%BASE_DIR%_thumbs</directory> <directAccess>false</directAccess> <maxHeight>100</maxHeight> <maxWidth>100</maxWidth> <quality>80</quality> </thumbs> <plugins> <plugin> <name>imageresize</name> <class>com.ckfinder.connector.plugins.ImageResize</class> <params> <param name="smallThumb" value="90x90"></param> <param name="mediumThumb" value="120x120"></param> <param name="largeThumb" value="180x180"></param> </params> </plugin> <plugin> <name>fileeditor</name> <class>com.ckfinder.connector.plugins.FileEditor</class> <params></params> </plugin> </plugins> <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl> </config>3. 在WEB-INF/web.xml下添加上传用的配置如下：
<!-- ckfinder文件上传配置 start --> <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>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /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> /ckfinder/core/connector/java/connector.java </url-pattern> </filter-mapping> <!-- ckfinder文件上传配置 end -->4./ckeditor/config.js：个人配置在这里不做讲解，大家可以在网上找一下~
5.新建editor.jsp文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckf"%>
<%@ taglib uri="http://ckeditor.com" prefix="ck"%>
<%
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>
<script type="text/javascript" src="<%=basePath%>/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<%=basePath%>/ckfinder/ckfinder.js"></script>
<script type="text/javascript">
window.onload = function(){
}
function onGet(){
alert(CKEDITOR.instances.Content.getData());
}
function onPut(){
CKEDITOR.instances.Content.setData("<p><strong>测试内容!</strong></p>");
}
</script>
</head>
<body>
<div style="margin:0 auto; width: 60%;">
<textarea id="Content" name="Content" rows="20" cols="100"></textarea>
<ckf:setupCKEditor basePath="/项目名字/ckfinder/" editor="Content" />
<ck:replace replace="Content" basePath="/项目名字/ckeditor"></ck:replace>
<p>
<button onclick="onGet();">读值</button>
<button onclick="onPut();">赋值</button>
</div>
</body>
</html>