首先下载CKEditor4.2与CKFinder2.3破解版还有JAVA开发的核心包3.5
地址:
CKEditor4.2: http://download.csdn.net/detail/xiayuzheng/5814361
CKFinder2.3破解版:http://download.csdn.net/detail/xiayuzheng/5814451
Java开发核心包3.5: http://download.csdn.net/detail/xiayuzheng/5814383
1.必须把解压出来的ckedictor文件夹ckfinder文件夹放到 根目录下 ,本人是放到 WebRoot下,否则会出现按钮图片缺失的情况。
ckeditor-java-core-3.5.3下面的3个jar包放到lib下,
ckfinder解压出来后的路径为ckfinder\CKFinderJava\WEB-INF\lib下的jar包也放到项目的lib下。
2.引入2个ckeditor与ckfinder中的js文件:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
3.创建一个textarea
<textarea class="ckeditor" name="content" id="content" ></textarea> //这里创建编辑器的方法是通过调用ckeditor这个class.
4.写一段Js脚本
<script type="text/javascript">
//这里我用的Jquery,那需要引入Jquery的js文件.如没有用到,可以不用引入。
$(function()
{
var editor = CKEDITOR.replace( 'content',
{
filebrowserBrowseUrl : '<%=basePath%>ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '<%=basePath%>ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '<%=basePath%>ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '<%=basePath%>ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '<%=basePath%>ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '<%=basePath%>ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ,
//uiColor: '#14B8C4',
language : 'zh-cn',
width:1000,
height:400,
//自定义工具栏,这里不写,默认显示全部
toolbar :
[
['Source','Styles', 'Format','FontSize','Font'],
['TextColor', '-' ,'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link','Unlink','-','Cut','Copy','Paste','-','Image','Flash','Smiley','Maximize']
]
});
//将ckfinder设置到设置到ckeditor
CKFinder.setupCKEditor( editor,'/ckfinder/' );
})
</script>
5.web.xml中添加以下配置,原先struts2及其spring的配置都不变:
- <!-- 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>1</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 -->
6.把下载的ckfinder包中WEB-INF目录下的config.xml文件拷贝过来,放到自己项目的WEB-INF目录下。
config.xml:
<config>
<enabled>true</enabled>
<!-- ckfinder文件上传时的绝对路径。 -->
<baseDir>E:\ALearning\Java\IDE工具\Apache-Tomcat-6.0\webapps\personal_blog\userfiles</baseDir>
<!-- ckeditor访问ckfinder提供的文件的网络路径。 -->
<baseURL>/personal_blog/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>
7.最后,在struts.xml配置文件中增加以下配置:
<!-- ckfinder文件上传配置 -->
<constant name="struts.action.excludePattern" value="/ckeditor/.*,/ckfinder/.*"/>
ckfinder采用servlet处理文件的,我配置的是struts默认会拦截所有请求,这里需要排除struts2拦截ckfinder的请求,否则ckfinder上传文件会失败。
整合完毕!!!!!!!
增加中文字体,自定义表情
在ckeditor文件夹下的config.js中增加以下代码
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//增加以下代码
//设置自定义皮肤
config.skin='moonocolor'
//清空缓存,添加中文字体
config.font_names = "宋体/宋体;黑体/黑体;隶书/隶书;楷体/楷体;" + config.font_names;
//自定义表情
//CKEditor.basePath -- 包含CKEditor的安装目录的完整URL
config.smiley_path=CKEDITOR.basePath+"plugins/smiley/qqFaceImage/";
config.smiley_images = [
'0.gif', '1.gif', '2.gif', '3.gif', '4.gif', '5.gif',
'6.gif', '7.gif', '8.gif', '9.gif', '10.gif', '11.gif',
'12.gif', '13.gif', '14.gif', '15.gif', '16.gif', '17.gif',
'18.gif', '19.gif', '20.gif', '21.gif', '22.gif', '23.gif',
]
};
最后截几张图: