页面编辑器CKEditor与CKFinder整合

        这两天做类似公司门户网站的项目，项目中要在后台提供添加产品内容介绍、新闻内容发布的功能模块，需要达到在后台直接编辑形成页面展示内容展示在前台页面，内容必不可少的一个素材就包含图片，要能在编辑器中直接插入图片，调整位置，大小等。经过筛选之后选择了CKEditor这个网页编辑器以及常用的一个组合件ckfinder。

        CKEditor是目前最优秀的可见即可得的网页编辑器之一，目前最新版本为4.4.4，在3.0之前名称为FCKEditor，3.0之后更名为CKEditor。这款编辑器采用JavaScript编写，具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点，项目使用的是Java+JSP编写，加入CKEditor十分便捷。

       1.下载CKEditor相关文件

       Ckeditor 官网： http://ckeditor.com/demo，进入官网之后点击顶部导航Download，可以选择下载哪种CKEditor包，CKEditor包目前有三种：Basic Package，基本包，包含17个插件，能够完成最基本的网页编辑功能、Standard Package，标准包，包含48个插件，能完成更多格式调整，包括字体选择，排版调整等，另外有图片上传等基本包没有带的功能。Full Package，完全包，拥有更丰富的样式设计以及其他功能。根据功能要求选择需要的包进行下载，这里我选择的是Standard Package，点击下载。得到ckeditor_4.4.4_standard.zip
       CKEditor forJava  在 http://ckeditor.com/download下载页面底部，可以下载到CKEditor 3.6.6.2for Java ，页面显示版本为3.6.6.2，但是下载之后解压得到的是ckeditor-java-core-3.5.3.jar，不知道什么原因，但是不影响使用。
       CKFinder，在 http://cksource.com/ckfinder/trial页面，可以下载到各种版本的CKFinder，选择Java版下载，得到ckfinder_java_2.4.2.zip，解压得到ckfinder文件。

        2. 将ckeditor和ckfinder加入到项目中

       解压CKEditor_4.4.4.zip和CKFinder_3.6.6.2.zip得到 ckeditor、ckfinder两个文件，把解压得到的两个文件复制到项目WebRoot目录下。
       解压ckeditor-java-core-3.5.3.zip ，得到jar包文件，将ckeditor-java-core-3.5.3.jar放到WEB-INF/lib中。
对项目文件大小精简，以下是可以删除的文件：
              ckeditor/sample
              ckeditor/lang 中除en.js、zh_cn.js
              ckfinder/sample
              ckfinder/changelog.txt、install.txt、license.txt、translation.txt
       复制ckfinder/CKFinderJava/WEB-INF/lib下所有的jar包到WEB-INF/lib下
       把ckfinder/CKFinderJava/WEB-INF/config.xml复制到WEB-INF下，改名为ckfinder.xml

       得到如下结构图：

              

       3. 在页面使用CKEditor

         Step1.在需要使用CKEditor编辑器的页面，引入CKEditor的js文件
                     < script type="text/javascript" src="ckeditor/ckeditor.js"></script>
         Step2.在需要提交的form表单里面将<textarea>和CKEditor实例绑定
                     < textarea name="content" id="content"rows="10" cols="80">
                   创建CKEditor实例：

                      < script >

                        var editor = null ;

                        editor= CKEDITOR.replace( 'content',{Hieght:700,Width:600});

                        CKFinder.setupCKEditor(editor, '../ckfinder/');

                      </ script >
                   实际文本编辑器内的内容content将会替代textarea的内容被提交到后台。
         Step3.在后台java代码中获取CKEditor编辑器的值

                   < script type="text/javascript">

                        function save(){

                            editor.updateElement();

                         }

                     </ script >
       因为CKEditor编辑器取代了textarea元素，所以在编辑器写的内容，其实都不在textarea中，为了获取textarea获得之，需要使用editor.updateElement()来更新textarea元素，后台就能使用request.getParameter()或者其他代码来得到编辑器的内容。

       4.将CKFinder 整合进CKEditor

          没有CKFinder，CKEditor作为一个编辑器，也是可以正常使用的，但是无法在编辑器里浏览服务器上的用户上传文件，所以需要整合CKFinder
           Step1.在页面引入CKFinder的JS文件
                     < script type="text/javascript" src="ckfinder/ckfinder.js"></script>
           Step2.创建CKFinder实例

             KFinder.setupCKEditor(editor, '../ckfinder/');

           Step3.配置CKFinder
                    在/WEB-INF/ckfinder.xml中，编辑如下内容
                    enabled:true，表示开启ckfinder功能，默认false
                    baseDir:上传文件存放的路径，这里必须写从屋里地址的全路径
                    baseURL:上传文件存放的URL，这里可以写一个相对路径或者完整的RUL，比如 http://www/example.com/upload/或者/upload/
                    types:指定上传文件的类型，子元素是<type name = “”></type>,其中name要和CKEditor里配置的路径的type一直。

         5.修改CKFinder配置

        CKFinder整合进入CKEditor之后浏览服务器上的用户文件是没有问题了，但是在将浏览的文件插入到文本中，会出现读取地址从项目根目录开始插入的问题，也就是虽然能够插入图片等文件，但是在页面上依然不能正常显示，这个时候需要修改CKFinder的一个配置文件，ckfinder.html
        打开WebRoot/ckfinder/ckfinder.html
        在function(){}函数中定义本地地址，项目名，相对路径等变量，并且获取值，如下：

               var localhostPath = curPath.substring(0,pos); // 获取主机地址

              var projectName =pathName.substring(0,pathName.substr(1).indexOf( '/')+1);

               var positionPath = localhostPath + projectName;
       在插入文件地址处修改地址拼接：

             config.selectActionFunction= function (fileUrl, data )

             {

          parentWindow['CKEDITOR'].tools.callFunction(funcNum, positionPath + fileUrl, data );

            };

        至此，能够在页面编辑器中完成图片的插入，并且完整的显示在编辑器中.如下图：