In this post,
We are going to see how ckeditor can be integrated in liferay+zk portlet and also how to get content from it ans show that content on our page.
We have already made simple portlet in liferay which was integrated with zk framework.You can read that thing in my previous posts.
1) Add new class ZkController.java and add below content and put this file in com.liferay.zk.controller package.
package com.liferay.zk.controller;
import org.zkforge.ckez.CKeditor;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Html;
import org.zkoss.zul.Window;
public class ZkController extends SelectorComposer<Window> {
/**
*
*/
private static final long serialVersionUID = 1L;
@Wire("#ed")
private CKeditor ed;
@Wire("#showHtm")
private Html showHtm;
@Listen("onClick = #showBtn")
public void showContent(){
//ed.setValue("hello");
showHtm.setContent(ed.getValue());
}
}
2)Edit view.zul as given below:
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk >
<window title="hello" id="window" apply="com.liferay.zk.controller.ZkController">
<ckeditor id="ed" width="600px"></ckeditor>
<button id="showBtn" label="${c:l('button-label')}"></button>
<html id="showHtm" style="padding:10px;overflow:auto;max-height:300px"></html>
</window>
</zk>
3)Edit zk-label.properties as below in docroot/properties folder
button-label = show
4)Add new file ckez-bind-addon.xml under WEB-INF folder and put below content in it:
<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<!-- The name of this addon. It must be unique -->
<addon-name>ckezbind</addon-name>
<!-- Specifies what other addon this depends
<depends></depends>
-->
<!-- Which language this addon will be added to -->
<language-name>xul/html</language-name>
<component>
<component-name>ckeditor</component-name>
<extends>ckeditor</extends>
<annotation>
<annotation-name>ZKBIND</annotation-name>
<property-name>value</property-name>
<attribute>
<attribute-name>ACCESS</attribute-name>
<attribute-value>both</attribute-value>
</attribute>
<attribute>
<attribute-name>SAVE_EVENT</attribute-name>
<attribute-value>onChange</attribute-value>
</attribute>
<attribute>
<attribute-name>LOAD_REPLACEMENT</attribute-name>
<attribute-value>value</attribute-value>
</attribute>
<attribute>
<attribute-name>LOAD_TYPE</attribute-name>
<attribute-value>java.lang.String</attribute-value>
</attribute>
</annotation>
</component>
</language-addon>
5)Enter below one entry in zk.xml in under <zk> tag
<language-config>
<addon-uri>/WEB-INF/ckez-bind-addon.xml</addon-uri>
</language-config>
6) Add ckez.jar in lib folder. You can download it from here.
7)Add portal dependency in liferay-plugin-package.properties as given below:
- portal-dependency-jars=\ commons-fileupload.jar,\ commons-lang.jar
8) Project structure:
9) No more steps :) deploy it and You will see below screen just add something in editor and press show button. It will show same content below show button. i have included this functionality because you could get idea about how we can get content from editor and show it on the page.
No comments:
Post a Comment