CKEditor结合CKfinder的学习

来源：互联网发布：angela js模块化技术编辑：程序博客网时间：2024/05/21 13:08

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>