电力项目十--整合文本编辑器

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一

Ckediter不支持文件上传，配合CkFinder插件使用

 

1.导入jar包，将CKFinder中的类放入src下

 

首先关闭eclipse的validate功能：

 

 然后去掉项目的校验

　　

 

修改配置文件：config.xml

上传文件的配置改为 true ， url前加上项目名称

<config>
    <!--
    CKFinder : Configuration File - Basic Instructions
    
    In a generic usage case, the following tasks must be done to configure CKFinder:
    1. Check the baseDir and baseUrl options;
    2. If available, paste your license key in the "licenseKey" setting;
    3. Enable CKFinder using the "enabled" setting.

    WARNING : DO NOT simply set "enabled" to "true" on a production site. By doing so, you 
    are allowing "anyone" to upload and list the files in your server. You must implement
    some kind of session validation.
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending
    -->
    <!-- 上传文件 -->
    <enabled>true</enabled>
    <!--
    Configure the location of uploaded files. See the following article for more details:
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/baseURL_and_baseDir
    -->
    <baseDir></baseDir>
    <baseURL>/userfiles/</baseURL>
    <licenseKey></licenseKey>
    <licenseName></licenseName>
    <!--
    Set the maximum size of uploaded images. If an uploaded image is larger, it
    gets scaled down proportionally. Set to 0 to disable this feature.
    -->
    <imgWidth>1600</imgWidth>
    <imgHeight>1200</imgHeight>
    <imgQuality>80</imgQuality>
    <!--
    See the following article for more details:
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/URI_Encoding
    -->
    <uriEncoding>UTF-8</uriEncoding>
    <!--
    ResourceType : defines the "resource types" handled in CKFinder. A resource
    type is nothing more than a way to group files under different paths, each one
    having different configuration settings.

    Each resource type name must be unique.

    When loading CKFinder, the "type" querystring parameter can be used to display
    a specific type only. If "type" is omitted in the URL, the
    "DefaultResourceTypes" settings is used (may contain the resource type names
    separated by a comma). If left empty, all types are loaded.

    maxSize is defined in bytes, but shorthand notation may be also used.
    Available options are: G, M, K (case insensitive).
    1M equals 1048576 bytes (one Megabyte), 1K equals 1024 bytes (one Kilobyte), 1G equals one Gigabyte.
    Example: 'maxSize' => "8M",

    ==============================================================================
    ATTENTION: Flash files with `swf' extension, just like HTML files, can be used 
    to execute JavaScript code and to e.g. perform an XSS attack. Grant permission 
    to upload `.swf` files only if you understand and can accept this risk.
    ==============================================================================
    -->
    <defaultResourceTypes></defaultResourceTypes>
    <types>
        <type name="Files">
            <url>/elecproject%BASE_URL%files/</url>
            <directory>%BASE_DIR%files</directory>
            <maxSize>0</maxSize>
            <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip
            </allowedExtensions>
            <deniedExtensions></deniedExtensions>
        </type>
        <type name="Images">
            <url>/elecproject%BASE_URL%images/</url>
            <directory>%BASE_DIR%images</directory>
            <maxSize>0</maxSize>
            <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
            <deniedExtensions></deniedExtensions>
        </type>
        <type name="Flash">
            <url>/elecproject%BASE_URL%flash/</url>
            <directory>%BASE_DIR%flash</directory>
            <maxSize>0</maxSize>
            <allowedExtensions>swf,flv</allowedExtensions>
            <deniedExtensions></deniedExtensions>
        </type>
    </types>
    <!--
    The session variable name that CKFinder must use to retrieve
    the "role" of the current user. The "role", can be used in the "accessControls"
    settings (bellow).
    -->
    <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
    <accessControls>
        <accessControl>
            <role>*</role>
            <resourceType>*</resourceType>
            <folder>/</folder>
            <folderView>true</folderView>
            <folderCreate>true</folderCreate>
            <folderRename>true</folderRename>
            <folderDelete>true</folderDelete>
            <fileView>true</fileView>
            <fileUpload>true</fileUpload>
            <fileRename>true</fileRename>
            <fileDelete>true</fileDelete>
        </accessControl>
    </accessControls>
    <thumbs>
        <enabled>true</enabled>
        <url>%BASE_URL%_thumbs/</url>
        <directory>%BASE_DIR%_thumbs</directory>
        <directAccess>false</directAccess>
        <maxHeight>100</maxHeight>
        <maxWidth>100</maxWidth>
        <quality>80</quality>
    </thumbs>
    <!--
    Increases the security on an IIS web server.
    If enabled, CKFinder will disallow creating folders and uploading files whose names contain characters 
    that are not safe under an IIS web server.
    -->
    <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
    <!--
    Due to security issues with Apache modules, it is recommended to leave the
    following setting enabled.

    How does it work? Suppose the following:

    - If "php" is on the denied extensions list, a file named foo.php cannot be
      uploaded.
    - If "rar" (or any other) extension is allowed, one can upload a file named
      foo.rar.
    - The file foo.php.rar has "rar" extension so, in theory, it can be also
      uploaded.

    In some conditions Apache can treat the foo.php.rar file just like any PHP
    script and execute it.

    If CheckDoubleExtension is enabled, each part of the file name after a dot is
    checked, not only the last part. In this way, uploading foo.php.rar would be
    denied, because "php" is on the denied extensions list.
    -->
    <checkDoubleExtension>true</checkDoubleExtension>
    <!--
    Indicates that the file size (maxSize) for images must be checked only
    after scaling them. Otherwise, it is checked right after uploading.
    -->
    <checkSizeAfterScaling>true</checkSizeAfterScaling>
    <!--
    Perform additional checks for image files
    if set to true, validate image size
    -->
    <secureImageUploads>true</secureImageUploads>
    <!--
    For security, HTML is allowed in the first Kb of data for files having the
    following extensions only.
    -->
    <htmlExtensions>html,htm,xml,js</htmlExtensions>
    <!--
    Force ASCII names for files and folders. If enabled, characters with diactric 
    marks will be automatically converted to ASCII letters.
    -->
    <forceASCII>false</forceASCII>
    <!--
    Folders to not display in CKFinder, no matter their location.
    No paths are accepted, only the folder name.
    The * and ? wildcards are accepted.
    ".*" disallows the creation of folders starting with a dot character.
    -->
    <hideFolders>
        <folder>.*</folder>
        <folder>CVS</folder>
    </hideFolders>
    <!--
    Files to not display/upload in CKFinder, no matter their location.
    No paths are accepted, only the file name, including extension.
    The * and ? wildcards are accepted.
    -->
    <hideFiles>
        <file>.*</file>
    </hideFiles>
    <plugins>
        <plugin>
            <name>imageresize</name>
            <class>com.ckfinder.connector.plugins.ImageResize</class>
            <params>
                <param name="smallThumb" value="90x90"></param>
                <param name="mediumThumb" value="120x120"></param>
                <param name="largeThumb" value="180x180"></param>
            </params>
        </plugin>
        <plugin>
            <name>fileeditor</name>
            <class>com.ckfinder.connector.plugins.FileEditor</class>
            <params></params>
        </plugin>
    </plugins>
    <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>

 然后修改web.xml文件

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

<!-- struts2的核心过滤器 -->
    <filter>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
 
<!-- 监听器，web容器启动spring -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:beans.xml</param-value>
    </context-param>
    <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

  <display-name>elec</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
<!--     <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file> -->
  </welcome-file-list>
  
      <!------------------ CKEditor+CKFinder文本编辑器，begin--------------------- -->
      <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>  
      <!-- CKEditor+CKFinder文本编辑器，end -->

</web-app>

 

 然后修改

 ckeditor/config.js

 

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // 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 = 400; //宽度
       config.height = 400; //高度
       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';

};

 在对应的页面actingIndex.jsp中加入

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

 然后加入：

<tr>
            <td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">站点运行情况：</td>
            <td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
                <s:textarea name="stationRun" id="stationRun" cssStyle="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');"></s:textarea>
                <script type="text/javascript">
                    CKEDITOR.replace("stationRun",{height:200,width:820});
                </script>
                <!-- <textarea name="stationRun" id="stationRun"   style="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');">9点站点运行正常</textarea> -->
            </td>
            
        </tr>

<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">设备运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="devRun" id="devRun" cssStyle="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('devRun');"></s:textarea>
<script type="text/javascript">
CKEDITOR.replace("devRun",{height:200,width:820});
</script>
</td>
</tr>

同时去掉原先的js

  window.onload=function(){
    //    checkTextAreaLen();
  }

 此时能进行编辑，但是无法上传图片：

上传图片失败的原因是：fck的servlet被struts2转发了

    <!--  * struts2的核心过滤器 -->
    <filter>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

 

解决办法：在web.xml文件中修改filter-mapping:

    <!--  * struts2的核心过滤器 --> <!-- 加入ck插件之后，需要修改过滤器过滤内容 ，方式拦截其他内容  -->
    <filter>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <url-pattern>*.do</url-pattern>
        <url-pattern>*.jsp</url-pattern>
    </filter-mapping>

 

上传文件成功

上传flash：

 

 更换编辑器样式：