码迷,mamicode.com
首页 > 其他好文 > 详细

ckeditor和ckfinder整合

时间:2016-01-06 11:39:10      阅读:883      评论:0      收藏:0      [点我收藏+]

标签:

一、下载必须的jar包

1、ckeditor_3.6.2.zip

2、ckeditor-java-3.6.2.war

3、ckfinder_java_2.1.zip

二、myeclipse引入jar包

位置:

技术分享技术分享技术分享

 

插入java代码到src目录

技术分享

引入js文件到WEB-ROOT

技术分享技术分享

导入config.xml文件到WEB-INFO文件下

技术分享

 修改 config.xml

  1、<enabled>false</enabled>

    当前限制上传功能

  2、<baseURL>/Elec/userfiles/</baseURL>

    设置文件保存目录

  3、

    <types>
    <type name="Files">
    <url>/Elec%BASE_URL%files/</url>该处必须加入项目名/Elec
    <directory>%BASE_DIR%files</directory>
    <maxSize>0</maxSize>
修改ckeditor文件夹下面的config.xml 

 1 /*
 2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
 3 For licensing, see LICENSE.html or http://ckeditor.com/license
 4 */
 5 
 6 CKEDITOR.editorConfig = function( config )
 7 {
 8     // Define changes to default configuration here. For example:
 9     // config.language = ‘fr‘;
10     // config.uiColor = ‘#AADC6E‘;
11     
12 
13     //config.language = ‘zh-cn‘; // 配置语言
14 //
15 //    config.uiColor = ‘#fff‘; // 背景颜色
16 //
17       //config.width = ‘800px‘; // 宽度
18 
19       //config.height = ‘300px‘; // 高度
20 //
21 //    config.skin = ‘office2003‘;// v2,kama,office2003(界面的皮肤)
22 //
23 //     config.toolbar = ‘Full‘;// 工具栏风格Full,Basic
24 //    
25 //    config.font_names=‘宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;‘ +
26 //    ‘隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;‘+ config.font_names;
27 
28     //  config.htmlEncodeOutput = true;
29     //config.startupOutlineBlocks = false; 
30 
31     //配置默认配置
32     config.language = ‘zh-cn‘; //配置语言
33        config.uiColor = ‘#FFF‘; //背景颜色
34        config.width = 800; //宽度
35        config.height = 200; //高度
36        config.skin = ‘office2003‘; //编辑器皮肤样式
37     // 取消 “拖拽以改变尺寸”功能
38        config.resize_enabled = false;
39     // 使用基础工具栏
40       //config.toolbar = "Basic";
41     // 使用全能工具栏
42        //config.toolbar = "Full";
43     //使用自定义工具栏
44     config.toolbar =
45      [
46      [‘Source‘, ‘-‘],
47      [‘Cut‘, ‘Copy‘, ‘Paste‘, ‘PasteText‘, ‘PasteFromWord‘, ],
48      [‘Undo‘, ‘Redo‘, ‘-‘, ‘Find‘, ‘Replace‘, ‘-‘, ‘SelectAll‘, ‘RemoveFormat‘],
49      [‘Image‘, ‘Flash‘, ‘Table‘, ‘HorizontalRule‘, ‘Smiley‘, ‘SpecialChar‘,‘PageBreak‘],
50      ‘/‘,
51      [‘Bold‘, ‘Italic‘, ‘Underline‘, ‘-‘, ‘Subscript‘, ‘Superscript‘],
52      [‘NumberedList‘, ‘BulletedList‘, ‘-‘, ‘Outdent‘, ‘Indent‘, ‘Blockquote‘],
53      [‘JustifyLeft‘, ‘JustifyCenter‘, ‘JustifyRight‘, ‘JustifyBlock‘],
54      [‘Link‘, ‘Unlink‘, ‘Anchor‘],
55      ‘/‘,
56      [‘Format‘, ‘Font‘, ‘FontSize‘],
57     [‘TextColor‘, ‘BGColor‘],
58      [‘Maximize‘, ‘ShowBlocks‘, ‘-‘, ‘About‘]
59      ];
60 
61 
62     /*** 文件上传功能的配置-----------------------
63      */
64     config.filebrowserBrowseUrl = ‘../ckfinder/ckfinder.html‘; 
65     config.filebrowserImageBrowseUrl = ‘../ckfinder/ckfinder.html?type=Images‘;
66     config.filebrowserFlashBrowseUrl = ‘../ckfinder/ckfinder.html?type=Flash‘;
67     config.filebrowserUploadUrl = ‘../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files‘;
68     config.filebrowserImageUploadUrl = ‘../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images‘;
69     config.filebrowserFlashUploadUrl = ‘../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash‘;
70 };

修改web.xml

技术分享

 

将代码

<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>

插入到项目的web.xml中

引用ckeditor和ckfinder的js

<script language="javascript" src="${pageContext.request.contextPath }/ckfinder/ckfinder.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>

引用script替换texterea

<script type="text/javascript">
                    CKEDITOR.replace("stationRun");
                </script>

 

ckeditor和ckfinder整合

标签:

原文地址:http://www.cnblogs.com/pi-qingwen/p/5104736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!