ckedit3.6.4+ckfinder2.3 学习笔记1（java）

最新推荐文章于 2021-02-17 02:36:08 发布

lhpaiti

最新推荐文章于 2021-02-17 02:36:08 发布

阅读量1.2k

点赞数

分类专栏： java ee 文章标签： java webapp stylesheet url jsp string

本文链接：https://blog.csdn.net/lhpaiti/article/details/8017779

版权

java ee 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：下载ckeditor和ckfinder

ckeditor下载地址：http://ckeditor.com/download/ 3.6.4版本

ckfinder下载地址：http://ckfinder.com/download/ 2.3版本
注意选择java版本的下载 。下载后的文件名为：ckeditor-java-3.6.4.zip 和ckfinder_java_2.3.zip。

第二步：搭建环境

1、将下载好的ckeditor-java-3.6.4.zip 和ckfinder_java_2.3.zip解压。解压后的ckeditor-java-3.6.4下有个文件夹名为“ckeditor”，将其拷贝至项目WebRoot下；解压后的ckfinder-java_2.3 路径：ckfinder_java_2.3\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\下面的ckfinder文件夹也拷贝至项目WebRoot下。并且将ckfinder_java_2.3\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\WEB-INF\目录下的config.xml文件拷贝至项目的WEB-INF下。

项目结构如图：

2、找到ckfinder_java_2.3\ckfinder\（ckfinder_java_2.3.zip解压后的）目录下的CKFinderJava.war文件，将其解压（WinRAR可以解压），并将WEB-INF/lib目录下的jar包全部拷贝至项目的lib目录下。
如图：

3、打开config.xml文件，修改enabled标签为true，修改baseURL标签为：<baseURL>/userfiles/</baseURL>（/userfiles/为文件上传存放路径，可按自己需求修改）。

<config>
	<enabled>true</enabled>
	<baseDir></baseDir>
	<baseURL>/userfiles/</baseURL>
	<licenseKey></licenseKey>
	<licenseName></licenseName>
	<imgWidth>1600</imgWidth>
	<imgHeight>1200</imgHeight>
	<imgQuality>80</imgQuality>
	<uriEncoding>UTF-8</uriEncoding>
	<forceASCII>false</forceASCII>
        <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
	<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>

4、配置web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<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>
	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

5、打开项目文件夹ckeditor下面的config.js 添加如下内容

CKEDITOR.editorConfig = function( config )
{
	// config.uiColor = '#AADC6E'; 设置编辑器颜色
	config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
 	config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
 	config.filebrowserFlashBrowseUrl = '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';
};

6、jsp页面：添加

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>My JSP 'ckeditor_ckfinder.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
       <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
  </head>
  
  <body>
    	<textarea rows="10" cols="80" name = "editor" ></textarea>
       <script type="text/javascript">CKEDITOR.replace('editor');</script>
  </body>
</html>

注意：CKEDITOR.replace('editor')中的editor必须和taxtarea中的name一致。

到此为止，CKEditor+CKFinder已近算是初步整合完毕，此上为个人ckeditor 和ckfinder的学习笔记，如有问题，希望各位大牛能够指出！

lhpaiti

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ckedit3.6.4+ckfinder2.3 学习笔记1（java）

第一步：下载ckeditor和ckfinderckeditor下载地址：http://ckeditor.com/download/ 3.6.4版本ckfinder下载地址：http://ckfinder.com/download/2.3版本注意选择java版本的下载。下载后的文件名为：ckeditor-java-3.6.4.zip 和ckfinder_java_2
复制链接

扫一扫