liferay6.2 集成CKEditor和ckfinder

最新推荐文章于 2021-02-21 07:43:48 发布

风行傲天

最新推荐文章于 2021-02-21 07:43:48 发布

阅读量1.5k

点赞数

分类专栏： CKEditor 文章标签： Ckeditor

本文链接：https://blog.csdn.net/fengxing_2/article/details/37905539

版权

CKEditor 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我的环境为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 根目录下

结构图：

接下来就是整合所需要的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，
第二行的<enabled>false</enabled>换成：<enabled>true</enabled>

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

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

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

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

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

新建portlet页面

view.jsp 代码

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

<script type="text/javascript" src="/test-portlet/CKEditor/ckeditor.js"></script>
<script type="text/javascript" src="/test-portlet/ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="/test-portlet/html/ckedit/textEditor.js"></script>

<table>
   <tr>
       <td>标题</td>
       <td><input id="editTitle" name="editTitle" type="text" /></td>
       <td>类型</td>
       <td>
           <select id="editType">
               <option value="0">常规</option>
               <option value="1">博客</option>
           </select>
       </td>
   </tr>
   <tr>
       <td>上市时间段</td>
       <td colspan="3">
           <input id="start" type="text"/>  至   <input id="end" type="text"/>
       </td>
   </tr>
   <tr>
       <td>标签</td>
       <td colspan="3">
           <input type="text" style="width: 80%;"/>
       </td>
   </tr>
</table>
<br/>


<textarea id="textEditor"></textarea>

<div><input type="button" value="提交" οnclick="submitData();"></div>

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'
                   });

}