web工程集成ckeditor/ckfinder实现在现编辑

缺乏、安全感 2022-02-16 15:45 338阅读 0赞

**一、  ckeditor+ckfinder相关资源**

ckeditor官网：http://ckeditor.com/

ckeditor下载地址：http://ckeditor.com/download

ckeditor4.1下载地址：http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.1/ckeditor\_4.1\_standard.zip

ckeditor3.6.4 for java下载地址：

http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.5.3/ckeditor-java-core-3.5.3.zip

ckfinder官网：http://cksource.com/ckfinder

ckfinder下载地址：http://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.3.1/ckfinder\_java\_2.3.1.zip下载的包中包含了源代码

ckeditor+ckfinder文档地址：http://docs.cksource.com/Main\_Page

**二、  ckeditor+ckfinder集成 相关配置 **

1.         新建web工程

2.         将ckeditor\_4.1\_standard.zip解压，将其中的ckeditor文件夹复制到工程目录webContent下。

3.         将ckfinder\_java\_2.3.1.zip文件解压，将其ckfinder文件夹下的CKFinderJava解压，将其中的ckfinder文件夹复制到webContent下；将WEB-INF下的config.xml、web.xml文件复制到新建工程下；将lib文件夹复制到工程下面。

4.         confing.xml文件修改

<enabled>true</enabled>
    <baseDir>E:\JAVA\jee32workspaces\.metadata\.plugins\org.eclipse.wst.server.core\tmp12\wtpwebapps\smartUFMS\imgfiles</baseDir>
    <baseURL>http://127.0.0.1:8080/smartUFMS/imgfiles/</baseURL>

5.         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>
    <servlet>

6.         ckeditor中ckfinder配置的内容，参见下面ckeditor config.js配置示例

7.         jsp页面添加内容

添加js文件

页面中添加

获取textarea中的js代码是：

var editorData =
    CKEDITOR.instances.safetyDetailContent.getData();

设置textarea中的内容：

CKEDITOR.instances.safetyDetailContent.setData('mydata');

**三、  个性化配置 **

1.         ckeditorconfig.js配置示例

CKEDITOR.editorConfig= function( config )
    {
             // Define changes to default configuration here. Forexample:
             // config.language = 'fr';
             // config.uiColor = '#AADC6E';
             //配置默认配置
              config.language = 'zh-cn'; //配置语言
              // config.uiColor = '#FFF'; //背景颜色
              // config.width = 400; //宽度
              // config.height = 400; //高度
              // config.skin = 'v2'; //编辑器皮肤样式
              // 取消 “拖拽以改变尺寸”功能
              // config.resize_enabled = false;
              // 使用基础工具栏
              // config.toolbar = "Basic";
    //       config.toolbar_Basic =
    //                 [
    //                      ['Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink','-','About']
    //                 ];
              // 使用全能工具栏
              //config.toolbar = "Full";
    //       config.toolbar_Full =
    //                 [
    //                      ['Source','-','Save','NewPage','Preview','-','Templates'],
    //                     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
    //                      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    //                      ['Form', 'Checkbox', 'Radio','TextField', 'Textarea', 'Select', 'Button', 'ImageButton','HiddenField'],
    //                      '/',
    //                     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    //                      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    //                     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    //                      ['Link','Unlink','Anchor'],
    //                     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    //                      '/',
    //                      ['Styles','Format','Font','FontSize'],
    //                      ['TextColor','BGColor'],
    //                      ['Maximize', 'ShowBlocks','-','About']
    //                 ];
     
                        
              //使用自定义工具栏
              config.toolbar =
              [
              ['Source', 'Preview', '-'],
              ['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']
              ];
              // 在 CKEditor 中集成 CKFinder，注意 ckfinder的路径选择要正确。
              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',
              config.filebrowserWindowWidth = '1000',
              config.filebrowserWindowHeight= '700'
    };

2.         ckeditor图片、flash、超链接弹出框dialog tabpanel项设置

CKEDITOR.on( 'dialogDefinition', function( ev )
    {
                       vardialogName = ev.data.name;
                      
                       vardialogDefinition = ev.data.definition;
                       if (dialogName == 'link' )
                       {
                                dialogDefinition.removeContents('advanced' );
     
                                dialogDefinition.removeContents('target' );
    /*
    Enable this partonly if you don't remove the 'target' tab in the previous block.
     
                                //FCKConfig.DefaultLinkTarget = '_blank'
                                // Get a referenceto the "Target" tab.
                                var targetTab= dialogDefinition.getContents( 'target' );
                                // Set the defaultvalue for the URL field.
                                vartargetField = targetTab.get( 'linkTargetType' );
                                targetField['default' ] = '_blank';
    */
                       }
                       if (dialogName == 'image' )
                       {
                                dialogDefinition.removeContents('advanced' );
                                dialogDefinition.removeContents('Link' );
                       }
                       if (dialogName == 'flash' )
                       {
                                dialogDefinition.removeContents('advanced' );
                       }
     });

**四、  出现的问题 **

1.         ckfinder在IE下正常显示

a)         错误1：p.selectSingleNode(o) is undefined

![20130519005741451][]

该错误的原因为：IE10 修改了 XML DOM Parser，微软官方解释为：http://blogs.msdn.com/b/ie/archive/2012/07/19/xmlhttprequest-responsexml-in-ie10-release-preview.aspx

ckeditor4.0 的解决方式为在代码中添加

**try** \{ s.responseType =  'msxml-document';\} **catch**(e)\{\}

位置在：

![20130519005834668][]

b)        错误2：Q.document.body is undefined

修改代码：将 Q = Q.document.body 添加try catch，即修改为如下图：

![20130519005920286][]

2.         ckfinder不能已中文名称命名

ckfinder的config.xml文件定义编码方式为utf-8

tomat下的server.xml将编码方式修改为utf-8：

3.         无法显示缩略图

报错如下：

![20130519010029291][]

需修改源码，修改ThumbnailCommand.java:68

![20130519010120017][]

![20130519010207609][]

**五、  ckfinder破解**

修改ckfinder.js文件

在a.application.prototype.resize该函数定义后的代码，将红色部分内容删除即可：

(function()\{

var  p ="\\x20",

q = "\\x3c\\057\\144\\x69\\x76\\076",

r = p +

"\\124\\150\\x69\\x73\\040\\151\\163\\040\\164\\150\\x65\\x20\\104\\105\\115\\117\\040\\166\\x65\\162\\x73\\x69\\157\\156\\040\\x6f\\146\\x20\\x43\\113\\x46\\x69\\156\\x64\\145\\x72\\x2e\\x20\\120\\x6c\\145\\x61\\x73\\145\\x20\\166\\151\\x73\\151\\164\\x20\\164\\x68\\145\\x20\\x3c\\x61\\x20\\150\\x72\\x65\\146\\075\\x27\\150\\164\\x74\\160\\x3a\\x2f\\x2f\\x63\\153\\146\\x69\\156\\144\\x65\\x72\\056\\143\\x6f\\x6d\\047\\040\\x74\\141\\x72\\x67\\145\\x74\\x3d\\x27\\137\\x62\\x6c\\x61\\x6e\\153\\047\\076\\103\\x4b\\x46\\x69\\156\\144\\x65\\x72\\x20\\167\\x65\\142\\040\\163\\151\\164\\x65\\074\\057\\141\\076\\040\\x74\\x6f\\040\\157\\x62\\164\\x61\\x69\\x6e\\x20\\x61\\040\\166\\x61\\x6c\\x69\\x64\\040\\154\\x69\\x63\\145\\156\\163\\145\\x2e" \+ q,

s = p \+

"\\103\\113\\106\\x69\\156\\144\\145\\x72\\040\\x44\\x65\\x76\\x65\\154\\157\\x70\\x65\\162\\x20\\114\\151\\x63\\145\\x6e\\163\\145\\074\\142\\162\\057\\076\\114\\151\\x63\\145\\156\\163\\x65\\144\\040\\x74\\157\\072\\x20";

红色内容浏览器转码后的内容为：

Thisis the DEMO version of CKFinder. Please visit the <ahref='http://ckfinder.com' target='\_blank'>CKFinder web site</a> toobtain a valid license.</div>

CKFinderDeveloper License<br/>Licensed to:

[20130519005741451]: /images/20220216/dee3a1fec5fe4a62bcf3c29d79ce7ecb.png
[20130519005834668]: /images/20220216/caed9e34a7ae4393bee3fc1e3bf59515.png
[20130519005920286]: /images/20220216/81b3ced642964af49bb6d58aa1e3dbf2.png
[20130519010029291]: /images/20220216/8bb2ab4ed2034dea96feafae77cff398.png
[20130519010120017]: /images/20220216/0051442d8f3449d5ac41d5ac9da7d170.png
[20130519010207609]: /images/20220216/cff21e78e4e74b7f9606f072e1843fd0.png