Ckeditor的整合

第一步下载ckeditor包

然后解压，如图

解压后在解压到相应的文件夹里如图

 

第二部找到相应的jar包然后复制到web项目的lib文件夹下

第一个jar包如图

其它jar包如图

首先找到CKFinderJava.war后再解压，如图

然后在WEN-INF下面找到lib里面有八个jar包，全部复制到web项目的lib文件夹里后jar就导入完成了。

 

第三步导入处理的java类

如图找到com问价夹后将com文件夹复制到web项目的src目录下

 

第四步导入相关js文件

如图找到ckeditor和ckfinder后复制到WebRoot目录下

 

第五步

1. 复制config.xml到WEB-INF目录下
2. 
3. 修改config.xml
4. 
5. 配置web.xml

6. <!-- CKEDITOR整合开始 -->
   <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>
   <!-- CKEDITOR整合结束 -->

7. Ckeditor里面的config.js，用来控制显示样式
8. CKEDITOR.editorConfig = function( config )
9. {

   // Define changes to default configuration here. For example:

10. // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    

    //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.font_names;

    // config.htmlEncodeOutput = true;
    //config.startupOutlineBlocks = false;

    //配置默认配置
    config.language = 'zh-cn'; //配置语言
    config.uiColor = '#FFF'; //背景颜色
    config.width = 800; //宽度
    config.height = 200; //高度
    config.skin = 'office2003'; //编辑器皮肤样式
    // 取消 “拖拽以改变尺寸”功能
    config.resize_enabled = false;
    // 使用基础工具栏
    //config.toolbar = "Basic";
    // 使用全能工具栏
    //config.toolbar = "Full";
    //使用自定义工具栏
    config.toolbar =
    [
    ['Source', '-'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'],
    '/',
    ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    ['Link', 'Unlink', 'Anchor'],
    '/',
    ['Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['Maximize', 'ShowBlocks', '-', 'About']
    ];

    
    /*** 文件上传功能的配置-----------------------
    */
    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';
    };

最后在jsp页面引入两个对应的js注意路径

 

第六步在jsp页面显示