HTML Editor Widget

A HTML Editor Widget has been implemented in APPX 5.2.0.

Overview:

The HTML Editor Widget can be used to enter and edit HTML in an APPX text field. The text field will contain the HTML code after the user has entered it.

Design Usage:

Use the Image Editor to add a text field to your image and resize it to be the size that you would like for your HTML Editor Widget. Then edit the GUI Attributes of the field and select "HTML EDITOR" as the control.

Runtime Usage:

At runtime, the user will be able to enter text as if they were using a mini word processor. The saved text can be displayed later using a HTML VIEWER control, if desired.

Customizing the editor

Appx uses the open source editor ckeditor for this widget. You can futher customize the capabilities of the editor (such as adding spell checking) by creating a custom configuration file. Refer to the documentation on the ckeditor website for creating a custom configuration file. Appx uses the 'compiled' format of the configuration file. As of this writing, Appx is using version 3.6.4 of CkEditor for Java.

Once you have created the file, place it in the Resource directory of your application and add a Resource for it. The resource state should be EDITOR CONFIG, location type should be Design File and the Location data should be the config file name (case sensitive on Linux/Unix systems). Finally, add the resource to the HTML editor widget. You may have to log off & on again for the new configuration to take affect.

This sample configuration file re-arranges the toolbar and adds spell checking:

{
  skin : 'office2003',
  autoParagraph : false,
// disableNativeSpellChecker : false,
  toolbar :
    [ +
      ['SelectAll','Cut','Copy','Paste','PasteText','PasteFromWord','-', +
       'Undo','Redo','Find','Replace','SpellChecker','Scayt'], +
      ['Font','FontSize','TextColor','BGColor','Bold','Italic','Underline'
], +
      ['JustifyLeft','JustifyCenter','JustfyRight','JustifyBlock'], +
      ['Styles','Format'], +
      ['Link','Table','HorizontalRule','Source'] +
    ],
};

Comments:

Read what other users have said about this page or add your own comments.

-- SteveFrizzell - 2012-11-08