CKEditor+CKFinder+jsp的整理

阅读更多

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

 

本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3

 

CKEditor下载地址：http://ckeditor.com/download            在线演示地址：http://ckeditor.com/demo

 

ckeditor-java-core-3.5.3.zip 下载地址：http://ckeditor.com/download   

 

CKFinder下载地址： http://cksource.com/ckfinder/trial

 

 1、解压ckeditor_3.6.4.zip，然后打开ckeditor文件夹，只需保留：images、lang、plugins、 skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可

 

其他的文件可以删除。然后将整个ckeditor放在web工程下，与WEB-INF处于同一级目录。

 

2、将ckeditor-java-core-3.5.3.zip解压，然后将ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。

 

3、将ckfinder_java_2.3.zip解压，然后将CKFinderJava.war解压后，将WEB-INF里面的lib下面所有的 jar包拷贝至web项目的lib下，将ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夹拷贝至web工程下，与ckeditor保持同级，将其下的WEB- INF下面的config.xml文件拷贝至web项目的WEB-INF下，并根据自己的项目稍作调整即可，如下：

 

 true 
  
 http://127.0.0.1:8088/sitenav/uploadFiles/   
 
 
 1600
 1200
 80
 UTF-8
 ...... ......

 

 

4、然后在web.xml下添加上传用的配置如下：

 

 
     
        ConnectorServlet 
        com.ckfinder.connector.ConnectorServlet 
         
            XMLConfig 
            /WEB-INF/config.xml 
         
         
            debug 
            false 
         
        2 
     
     
        ConnectorServlet 
         
            /ckfinder/core/connector/java/connector.java 
         
     
     
        FileUploadFilter 
        com.ckfinder.connector.FileUploadFilter 
         
            sessionCookieName 
            JSESSIONID 
         
         
            sessionParameterName 
            jsessionid 
         
     
     
        FileUploadFilter 
         
            /ckfinder/core/connector/java/connector.java 
          
     
    

 

 

5、然后修改ckeditor下面的config.js，如下：

CKEDITOR.editorConfig = function( config )
{
 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' ;
 config.language = "zh-cn";
 config.image_previewText=' '; //预览区域显示内容
 config.skin = 'kama';//默认皮肤
 //config.skin = 'v2';
 //config.skin = 'office2003';
 
 config.toolbar = 'Full';
 
 config.toolbar_Full =
 [
     ['Source','-','Save','NewPage','Preview','-','Templates'],
     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
     '/',
     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
     ['Link','Unlink','Anchor'],
     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
     '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor'],
     ['Maximize', 'ShowBlocks','-','About']
 ];

 config.toolbar_Basic =
 [
     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
 ];
 
};

 

 

6、然后就是CKEditor+CKFinder在jsp页面中应用，如下

 

       a、在jsp文件中加入：

 

            <%@ taglib uri = "http://ckfinder.com" prefix="ckf" %>
           <%@ taglib uri="http://ckeditor.com" prefix="ck" %>       

 

      b、需要添加编辑组件如下编写