Tags:
create new tag
view all tags

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.

htmleditor.png

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.

htmlrun.png

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

Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 2013-06-24 - JeanNeron
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback