HTML Editor On The Fly

Maintainer: Hieplq (talk)
Sponsors By: Andy Conn
Issue Idea From: Norbert Bede
Current Version: 1.0
License: GPLv2 - Free as in Freedom not Free Lunch
Source:

Jira ticket: Jira ticket

Description

Plugin bring a new WEditor to edit html text on WYSIWYG mode INLINE It also help to display correct HTML on grid view mode

On action
Display on form view
Display on grid view

Install

Replace library ckez.jar on org.idempiere.zk.extra/lib/ckez.jar with version download from

 ckez.jar
 you can user eclipse to export this library by yourself

Install this plugin

 this plugin add a column isHtml on AD_Column table
 2pack is stucked by IDEMPIERE-3322 now you have manual run migrate script here Migrate Script

Tick to isHtml checkbox on column

 isHtml support every text column (String, memo, Text, Text Long)

Toolbar now too big and have a lot option.

 You can configuration to limit option by use separate configuration file.
 See line : "fMessage.setCustomConfigurationsPath("/js/ckeditor/config.js");" on class WEMailDialog

HTMLEditorDisplaySetting

Some pending idea to improve this plugin

I will do it when I have free time and interest to do. I also welcome to integrate job from other guys to improve this plugin. I also welcome you to sponsors me to complete it.

Find out a suitable place for toolbar

 now toobar is floating and a bit overlap to edit control
 we can use one share toolbar place at top of window, below main toolbar
 this tool bar just display when focus on a HTMLEditor
 refer: Share toolbar

 Or we display toolbar above of edit control when focus to edit control like now, 
 but auto resize it to have same with of control and don't overlap control
 refer: Fix toolbar

Add configuration toolbar to Application Dictionary

Development

import zkckeditor source

zkckeditor is development like a java library, and use script to build but for convenient i create a plugin eclipse project, so i can edit and debug with idempiere workspace i create a fork and use git to keep sync with main project.

clone source from fork CKEditor import it to idempiere workspace

export ckez.jar

 # right click to project zkckeditor and choose Export
 # on dialog choose java/JAR file
 # on next dialog, un-select zkckeditor to clear default select file
   * choose zkckeditor/"ckez/src"
   * choose zkckeditor/"ckez/src/archive"
   * un-select zkckeditor/"ckez/src/archive"/META-INF
   * at JAR File textbox fill in "org.idempiere.zk.extra/lib/ckez.jar"
 # on next dialog 
   * choose Export class with warning
 # on next dialog 
   * choose use existing ... and fill in value "/zkckeditor/ckez/src/archive/META-INF/MANIFEST.MF"

checkout and import project vn.hsv.htmleditor

(*)you have to re export each time change at project zkckeditor

Update

I do some improve

1. Update to ckeditor 4.6.2 2. customize toolbar by tool toolbar configurator from CKEditor and easy use result to adempiere 3. refine position of toolbar

New Look

Install on server run from binary

1. run migrate script

2. install plugin download from here vn.hsv.htmleditor

3. find your plugin org.idempiere.zk.extra, modify it's MANIFEST.MF like this patch modify package export

4. add bellow style class on file plugins/org.adempiere.ui.zk_4.1.0.v20170402-0315/theme/default/css/theme.css.dsp

 .cke_editable.cke_editable_inline{
     padding-top:4px;
     padding-left:5px;
   
 }

 .cke_editable.cke_editable_inline > p{
     margin-top:0px;
     margin-bottom:0px;
   
 }

 .cke_editable_cke_editable_inline_parent{
     padding-top:0;
     padding-left:0;
 }

5. replace file ckez.jar inside org.idempiere.zk.extra by file download from ckez.jar

Customize ckEditor toolbar

1. use tool follow guideline here toolbar configurator to customize toolbar

2. download this html file and open by browse

3. copy value of config.toolbar (just value isn't include ";" after "]") at step 1 into tool at step 2 and click button "Click Me!"

4. at step 1 if you remove some button, you have new value of config.removeButtons

5. now you only can apply customer toolbar button from code. i plan improve after IDEMPIERE-3323 use function ckEditor.setRemoveButtons and ckEditor.setToobarGroupConfig to set value at step 3 and 4

Plugin: CKEditor

Contents