Home > Database > Mysql Tutorial > liferay6.2 集成CKEditor和ckfinder

liferay6.2 集成CKEditor和ckfinder

WBOY
Release: 2016-06-07 15:44:17
Original
1280 people have browsed it

我的环境为 liferay6.2,CKEditor4.4.3,ckfinder2.4.1 集成java 1.下载工具包 CKEditor 下载地址 http://ckeditor.com/download 下载后为ckeditor_4.4.3_standard.zip 下载java所需的jar文件 ckeditor-java-core-3.5.3.zip ckfinder 下载地址 http://ckfind

我的环境为liferay6.2,CKEditor4.4.3,ckfinder2.4.1 集成java


1.下载工具包

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

  下载后为 ckeditor_4.4.3_standard.zip

 下载java所需的jar文件 ckeditor-java-core-3.5.3.zip


 ckfinder  下载地址  http://ckfinder.com/download

  下载后为  ckfinder_java_2.4.1.zip


2. 整合

 解压上面下载的三个文件,将ckeditor_4.4.3_standard.zip解压的文件全部复制到项目中 docroot 根目录下,

接着解压:ckfinder_java_2.2.1.zip,将ckfinder_java_2.2.1/ckfinder下的 CKFinderJava.war再次解压,找到CKFinderJava下的ckfinder文件夹,将其拷贝到docroot 根目录下


结构图:

liferay6.2 集成CKEditor和ckfinder


接下来就是整合所需要的jar包,到刚才解压的war 包( CKFinderJava.war)下找,位置如下:ckfinder\CKFinderJava\WEB-INF\lib


将jar包全部拷贝放到项目docroot--> WEB-INF --> lib下

接着把配置文件:config.xml也拷贝到docroot/WEB-INF下

配置文件同样到刚才解压的WAR下找,路径为:ckfinder\CKFinderJava\WEB-INF


打开config.xml,
第二行的false换成:true

第四行的/test-portlet/userfiles/ 换成/CkeditorForJava/userfiles/

注意:此处的test-portlet是根据你的项目名定的。


打开web.xml,添加以下内容



        FileUploadFilter
        com.ckfinder.connector.FileUploadFilter
        
            sessionCookieName
            JSESSIONID
        

        
            sessionParameterName
            jsessionid
        

    

    
        FileUploadFilter
        /ckfinder/core/connector/java/connector.java
    

    
        ConnectorServlet
        com.ckfinder.connector.ConnectorServlet
        
            XMLConfig
            /WEB-INF/config.xml
        

        
            debug
            false
        

        1
    

    
        ConnectorServlet

       
        /ckfinder/core/connector/java/connector.java
    

我放在docroot下面 所以配置 /ckfinder/core/connector/java/connector.java
你要是放在docroot/js下面 就直接配置js/ckfinder/core/connector/java/connector.java


新建portlet页面

view.jsp  代码











    
        
        
        
        
    
    
        
        
    
    

        
    
标题 类型
            
        
上市时间段
              至   
        

            
        









textEditor.js  代码

var ckeditorText;

$(document).ready(function() {
    initCKEditor();
});

/**
 * 提交数据
 */
function submitData() {
    // 取值
    console.info(ckeditorText.getData());
}

/**
 * 初始化编辑器
 */
function initCKEditor() {

    if (CKEDITOR.instances['textEditor']) {
        CKEDITOR.remove(CKEDITOR.instances['textEditor']);
    }

  // 项目名称
    var basePath = '/test-portlet/';
    // CKEDITOR.replace("textEditor");

   // 配置修改ckfinder     路径不能出错,出错就出不来,此配置也可以在ckeditor文件夹下的config.js中做修改
    ckeditorText = CKEDITOR
            .replace(
                    "textEditor",
                    {
                        filebrowserBrowseUrl : basePath
                                + 'ckfinder/ckfinder.html',
                        filebrowserImageBrowseUrl : basePath
                                + 'ckfinder/ckfinder.html?type=Images',
                        filebrowserFlashBrowseUrl : basePath
                                + 'ckfinder/ckfinder.html?type=Flash',
                        filebrowserUploadUrl : basePath
                                + 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
                        filebrowserImageUploadUrl : basePath
                                + 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
                        filebrowserFlashUploadUrl : basePath
                                + 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
                        filebrowserWindowWidth : '1000',
                        filebrowserWindowHeight : '1000'
                    });

   
}

配置完后就可以正常启动了。效果

liferay6.2 集成CKEditor和ckfinder

liferay6.2 集成CKEditor和ckfinder

liferay6.2 集成CKEditor和ckfinder


3.优化

移除这些无用的信息

liferay6.2 集成CKEditor和ckfinder



2. 去掉左下角说明方法,打开ckfinder下面的ckfinder.js文件,查找this.dV().getChild(0).appendHtml,其他变量会变,屏蔽这句代码就可以

/**if(!D)this.dV().getChild(0).appendHtml(A||B||y!=4?t:u+"\x3c\142\076"+k.htmlEncode(a.ed)+"\x3c\057\142\076\074\x2f\x64\x69\x76\x3e");*/

则左下面的说明会消失


 



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template