CKEditor结合CKfinder的学习

CKEditor  api学习地址： http://docs.ckeditor.com/# 点击打开链接

通过修改配置文件，我们可以添加一些自定的功能，或去掉一些功能，或加上几种常用字体

1.在CKeditor的默认配置中是配置了所有toolbar

     

    config.toolbarGroups = [
         { name: 'document',    groups: [ 'mode' , 'document', 'doctools' ] },
         { name: 'clipboard',   groups: [ 'clipboard' , 'undo' ] },
         { name: 'editing',     groups: [ 'find' , 'selection', 'spellchecker' ] },
         { name: 'forms' },
         '/',
         { name: 'basicstyles', groups: [ 'basicstyles' , 'cleanup' ] },
         { name: 'paragraph',   groups: [ 'list' , 'indent', 'blocks' , 'align' , 'bidi' ] },
         { name: 'links' },
         { name: 'insert' },
         '/',
         { name: 'styles' },
         { name: 'colors' },
         { name: 'tools' },
         { name: 'others' },
         { name: 'about' }
     ];

tolbar就是编辑器上的每一个功能苦块，最后的'/'表示的是换行，说明上面有三行。

如果只想使用自己想要的功能，则可以将不要的功能去掉

如下：

          在config.js文件中

     CKEDITOR.editorConfig = function(config) {
     // Define changes to default configuration here. For example:
     // config.language = 'fr';
     // config.uiColor = '#AADC6E';
     // Default setting.
     config.toolbarGroups = [
         { name: 'basicstyles', groups: [ 'basicstyles' , 'cleanup' ] },
         { name: 'paragraph',   groups: [ 'list' , 'indent', 'blocks' , 'align' , 'bidi' ] },
         { name: 'links' },
         { name: 'insert' },
         '/',
         { name: 'styles' },
         { name: 'colors' },
         { name: 'tools' },
         { name: 'others' },
         { name: 'about' }
     ];
     
   };

2.设置字体类型：

     config.font_names ='Arial/Arial, Helvetica, sans-serif;' +'Times New Roman/Times New Roman, Times, serif;' +'Verdana';
     config.font_names = 'Arial;Times New Roman;Verdana';

3.配置表情图片：

        1.  一般的表情图片都是放到ckeditor\plugins\smiley下面

        2.  配置表情图片有几个相关的属性：

               smiley_columns:表示一行多少列，放多少张图片

               smiley_descriptions:用于描述图片的字符

               smiley_images:用于保存图片文件名的数组

               smiley_path:指定表情图片存放的路径

          因为要涉及到文件的路径，而一般都是项目路径，所以这里需要在js中使用到 CKEDITOR.basePath这个变量的值，作为存放文件的路径

     例：

     //定义一个数组
     var images = [];
     
     for(var i=0;i<16;i++){
           images[i] = i+1+'.gif';
     }
     
     config.smiley_path = CKEDITOR.basePath + 'plugins/smiley/ali/';
     config.smiley_columns = 8;
     config.smiley_images = images;

  

4.实现上传功能：

     新版的ckeditor将上传的功能分离出来了，形成了一个新的ckfinder的功能，所以要在ckeditor中使用上传功能，必须要添加ckfinder的文件，文件有ckfinder的核心文件，jar包，和配置文件

     步骤：

          （1）.添加ckfinder文件，将ckfinder的核心文件放到web-root下，将jar包倒入，将config.xml配置文件放到web-inf下

         

     

          （2）.修改config.xml配置文件

            

               < enabled>true </enabled> <!-- 启动上传功能 -->
               < baseURL>/ userfiles/ </baseURL> <!-- 上传路径 -->

        （ 3）.在web.xml文件中配置CKFinder.jar包下的核心Servlet类ConnectorServlet.class和过滤器类 FileUploadFilter

                   这个配置如下：

           

            <web-app version= "2.5"
                   xmlns= "http://java.sun.com/xml/ns/javaee"
                   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" >
             <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 >
           <session-config >
                   <session-timeout> 10</ session-timeout>
           </session-config >
           <welcome-file-list >
                <welcome-file >index.jsp </welcome-file>
            </welcome-file-list >
        </web-app>

       

         （4）.在CKeditor中的config.js中添加如下代码：

               例：

         

          //alert(window.location.href)//这里是获得项目路径
         CKEDITOR.editorConfig =  function (config) { 
              config.filebrowserBrowseUrl =  window.location.href+'ckfinder/ckfinder.html' ; 
              config.filebrowserImageBrowseUrl =  window.location.href+'ckfinder/ckfinder.html?type=Images' ; 
              config.filebrowserFlashBrowseUrl =  window.location.href+'ckfinder/ckfinder.html?type=Flash' ; 
              config.filebrowserUploadUrl =  window.location.href+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ; 
              config.filebrowserImageUploadUrl =  window.location.href+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ; 
              config.filebrowserFlashUploadUrl =  window.location.href+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ; 
              config.filebrowserWindowWidth = '1000'; 
             config.filebrowserWindowHeight = '700'; 
             config.language =  "zh-cn" ; 
       };
 

     

        （5）.在jsp页面中添加CKfinder标签

          

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

          <link rel= "stylesheet" href ="ckeditor/samples/sample.css" type="text/css" ></link>
          <script type= "text/javascript" src="js/jquery-1.8.0.js" ></script>
          <script type= "text/javascript" src="ckeditor/ckeditor.js" ></script>
          <script type= "text/javascript" src="ckeditor/adapters/jquery.js" ></script>
          <script type= "text/javascript" src="ckfinder/ckfinder.js" ></script>

          <body>
           <textarea name="editor"></ textarea>
           <ckfinder:setupCKEditor editor="editor" basePath="/MyCKEditor/ ckfinder/" /> 
           <ckeditor:replace replace="editor" basePath=" /MyCKEditor/ ckeditor/" ></ckeditor:replace>
         
          </body>