java配置ckeditor与ckfinder

下载CKEditor:ckeditor_3.6.5.zip

下载CKEditor for Java：ckeditor-java-core-3.5.3.zip

下载CKFinder: ckfinder_java_2.3.zip

A.配置ckeditor

1.将下载下来的ckeditor_3.6.5.zip解压出来的ckeditor粘贴到web项目的WebRoot目录下；

2.将下载下来的CKEditor for Java 解压，找到(ckeditor-java-core-3.5.3.jar)复制进项目的”WebRoot/WEB-INF/lib”目录下；

3.在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

4.一般用"<textarea>"来显示内容，在需要使用的地方把<textarea>内容换成ckeditor，如下：

<textarea id="name" name="name"></textarea>

<ckeditor:replace replace="name" basePath="/ServletDemo2/ckeditor/" />

replace指的是要替换的<textarea>标签的id或者name属性值；

basePath指的是ckeditor的存放路径

B.配置ckfinder

1.将下载的ckfinder_java_2.3.zip解压，找到ckfinder下面的CKFinderJava.war并解压；

2.将解压出来的CKFinderJava文件夹下的ckfinder文件夹拷贝到网站的WebRoot目录下和ckeditor在同一级目录；

3.将CKFinderJava\WEB-INF\lib下的所有jar包都复制进项目的”WebRoot/WEB-INF/lib”目录下；

4.将CKFinderJava\WEB-INF\config.xml配置文件到项目”WebRoot/WEB-IN"目录下；

5.修改config.xml文件，如下：

<config>

<enabled>true</enabled>

<baseDir></baseDir>

<baseURL>/ServletDemo2/UploadFiles/</baseURL>    

          上面的baseURL是上传文件的存放路径，UploadFiles文件夹一定要存在；

6.将CKFinderJava\WEB-INF\web.xml文件中 <web-app></web-app>之间的内容复制粘贴到你的项目的"WebRoot/WEB-INF/web.xml"文件的

<web-app></web-app>标签之间；

7.配置ckeditor上传调用ckfinder,打开ckeditor下面的config.js,加入以下内容：

CKEDITOR.editorConfig = function( config )
{
	    config.filebrowserBrowseUrl =  '/ServletDemo2/ckfinder/ckfinder.html';  
	    config.filebrowserImageBrowseUrl =  '/ServletDemo2/ckfinder/ckfinder.html?type=Images';  
	    config.filebrowserFlashBrowseUrl =  '/ServletDemo2/ckfinder/ckfinder.html?type=Flash';  
	    config.filebrowserUploadUrl =  '/ServletDemo2/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';  
	    config.filebrowserImageUploadUrl =  '/ServletDemo2/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';  
	    config.filebrowserFlashUploadUrl =  '/ServletDemo2/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';  
	    config.filebrowserWindowWidth = '1000';  
	    config.filebrowserWindowHeight = '700';  
	    config.language =  "zh-cn" ;
	    config.skin = 'office2003'; // kama,office2003,v2 
		config.language = 'zh-cn'; // 配置语言
     	config.uiColor = '#fff'; // 背景颜色
//      config.width = '800px'; // 宽度
//      config.height = '300px'; // 高度
//		config.skin = 'office2003';// 界面v2,kama,office2003
        config.toolbar = 'Full';// 工具栏风格Full,Basic 
        config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;';
     //   config.htmlEncodeOutput = true;
	  //  config.startupOutlineBlocks = false; 
};

8..在需要使用的jsp页面配置CKFinder标签：<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%>

9.在替换ckeditor的textarea标签使用：

<textarea id="name" name="name"></textarea>
<ckfinder:setupCKEditor basePath="/ServletDemo2/ckfinder/" editor="name" />
<ckeditor:replace replace="name" basePath="/ServletDemo2/ckeditor/" />

10.去掉ckfinder浏览服务器上面的广告和左下的广告

Ctrl+F键查找 “<h4 ”开头的标签，在里面加入属性：style='display:none;' 改后是像这样的：

<h4 class='message_content' style='display:none;'></h4>

再查找 “ var p=" ” 找到像下面这样的：

(function(){var p="\074\x64\151\166\040\x63\154\x61\x73\x73\x3d\x27\166\151\x65\x77\040\164\157\157\x6c\137\160\141\156\x65\154\x27\040\x73\164\171\x6c\145\x3d\x27\x70\141\x64\x64\x69\156\x67\072\x32\x70\x78\x3b\x64\151\163\160\x6c\141\x79\x3a\142\x6c\157\x63\x6b\040\041\151\155\160\x6f\162\164\x61\x6e\164\x3b\160\x6f\x73\151\x74\x69\x6f\x6e\072\163\164\x61\164\x69\143\040\x21\151\155\160\x6f\162\164\x61\156\164\x3b\143\157\x6c\157\x72\x3a\x62\154\141\143\153\x20\041\151\155\160\x6f\x72\x74\x61\156\x74\073\142\x61\x63\153\147\x72\x6f\x75\156\x64\x2d\143\157\154\x6f\162\x3a\x77\x68\151\164\145\040\041\151\x6d\160\x6f\162\164\141\x6e\164\073\047\076",q="\074\057\x64\x69\166\x3e",r=p+"\124\x68\x69\163\x20\151\x73\040\164\x68\145\x20\x44\x45\x4d\x4f\x20\x76\x65\162\x73\x69\157\x6e\x20\157\146\040\x43\113\x46\x69\156\x64\145\x72\056\x20\120\x6c\x65\x61\163\x65\040\x76\151\163\151\164\x20\164\150\x65\040\074\x61\x20\x68\162\145\x66\075\x27\150\164\164\x70\072\x2f\x2f\x63\153\146\x69\156\x64\x65\162\056\x63\157\x6d\047\x20\164\x61\x72\147\x65\164\x3d\047\137\142\x6c\141\156\x6b\x27\x3e\103\113\x46\x69\156\x64\x65\x72\x20\167\145\142\040\163\x69\x74\145\x3c\x2f\141\x3e\x20\x74\157\x20\x6f\x62\164\x61\151\x6e\040\141\040\x76\x61\x6c\x69\x64\040\x6c\x69\x63\145\x6e\x73\x65\x2e"+q,s=p+"\103\x4b\x46\x69\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\160\x65\x72\040\114\x69\x63\x65\156\163\x65\074\142\162\x2f\076\114\151\x63\145\x6e\x73\x65\x64\040\164\157\x3a\x20";function t(v,w){var x=0,y=0;

将p换成这样：var p=''"\x20",

至此ckeditor ckfinder基本配置完毕，但是还会有缩略图不能显示的问题，网上给出的解决方案是修改

ThumbnailCommand.java ，改好的如下：

// Set content type  
    if (mimetype != null) {  
        response.setContentType(mimetype + "; name='"  
                + this.fileName + "'");//这里修改  
    } else {  
        response.setContentType("name='" + this.fileName + "'");//这里修改  
    }  

此文件在源码包里面，所以你得下载ckfinder的源码包重新编译，点击此处下载源码包