Extended Nomads Objects -- TinyMCE HTML Editor
From PxPlus
A new Extended Control has been added to PxPlus to allow you to access external features, such as the Google Maps API or the TinyMCE HTML editor control, in a Nomads or iNomads environment. PxPlus Extended Controls are available through the Nomads COM interface, allowing you to select from a list of PVX Controls in addition to the list of Activex Controls when selecting a COM Control Name in the Nomads Designer. The remainder of the Nomads definition and processing is identical to that of a COM control. However, unlike most other COM controls, extended controls are also supported by iNomads.
The TinyMCE HTML Editor has been added to PxPlus a an Extended Control. TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It provides an editing interface that resembles how the page will be displayed in a web browser and does not require any HTML knowledge.
Contents |
Description
The HTML editor control has four pre-defined edit toolbar layouts, simple, advanced, extended and fullpage that offer a wide range of editing tools, although you may also create your own custom layout. By default the editor output does not include <html> or <body> elements, but the fullpage option allows you create full HTML pages. The toolbar may be located at the top or bottom of the edit area, or as an external toolbar that appears above the control in an iNomads environment. The toolbar controls may be justified left, center or right in the toolbar area. Toolbar layout, location and alignment must be set in the Nomads Tinymce Editor definition, and may not be changed dynamically after the control is drawn.
As an Extended control, the editor control is not included in the tab sequence and does not have an onChange event. The contents of the editor may be loaded or retrieved via the control's value$ property.
Version 3.3 of the TinyMCE editor is included with PVX Plus version 9. PVX Plus simply supplies an interface to the TinyMCE editor and is not responsible for support in regards to the control itself. Internet access is not required.
Information about the editor can be found at: http://tinymce.moxiecode.com/index.php
Licence information can be found at: http://tinymce.moxiecode.com/license.php
Note: While it is possible to include multiple instances of the TinyMCE editor control on a panel, this is not recommended as value of the contents of the individual controls may not be completely reliable when there is more than one editor control.
Using the TinyMCE HTML Editor
Use the Nomads Designer to add an HTML editor to your application panel.
Select External Tools (COM control) from the Controls window and outline the location of the HTML editor control on the panel.
In the Properties window, name the control; in our example we have called it ED. Then click the COM Control Name button in the Display section and select PVX Controls from the pop-up menu. Select Tinymce Editor Control from the list.
Click the Properties/Methods/Events button in the Display section of the Properties window.
Three properties are required when defining an editor control:
toolbarLocation$ - Location of the tool bar containing the edit controls.
Options are top (default) or bottom or external (iNomads only).
toolbarAlign$ - Alignment of the edit controls.
Options are left (default), center and right.
toolbarLayout$ - Selection of edit controls. There are four pre-defined layouts:
simple, advanced, extended and fullpage, but you can also
create your own custom layout. This will be discussed later.
These properties and (other read-only properties used by Nomads/iNomads) are used when creating the control and cannot be changed dynamically. The only dynamic property is the value$ property, which can be used to load and retrieve the contents of the editor.
In our example, we have also added a Load and Save button to the panel. The Load button invokes the GET_FILE_BOX dialog to specify an HTML file to load into the editor. The onChange logic looks like this:
get_file_box read p$,lwd,"" if p$<>"" then open(hfn,isz=-1)p$; read record (lfo,siz=1000000) r$; ed.ctl'value$=r$; close(lfo)
When a file name is selected, it is opened and the contents are read into a string variable which is then assigned to the value$ property of the control. This loads the contents of the file into the editor.
The Save button retrieves the contents of the editor control via the editor's value$ property and writes them to a local file, then displays them in the default browser. The onChange logic looks like this:
x$=ed.ctl'value$ serial "[lcl]htmltest.htm",err=*proceed open purge(hfn)"[lcl]htmltest.htm" print(lfo)x$ close(lfo) system_help "htmltest.htm"
Editor Properties
There are four properties specific to the TinyMCE HTML editor.
| Property | Description |
|---|---|
| toolbarAlign$ | Alignment of the edit controls within the toolbar area. Options are left (default), center and right. |
| toolbarLocation$ | Location of the tool bar containing the edit controls. Options are top (default) or bottom or external. The external option displays the toolbar above the control when the control has focus, and is available in iNomads only. |
| toolbarLayout$ | Selection of edit controls. There are four pre-defined layouts: simple, advanced, extended and fullpage, but you can also create your own custom layout.
Options include bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, fontselect, and fontsizeselect.
Line 1: newdocument, preview, search, replace, removeformat, undo, redo, link, unlink, anchor, image, cleanup, code. Line 2: fontselect, fontsizeselect, bold, italic, underline, strikethrough, forecolor, backcolor. Line 3: justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, blockquote, hr, pagebreak, charmap, sub, sup.
Line 1: newdocument, print, preview, search, replace, undo, redo, link, unlink, anchor, image, media, cleanup, code. Line 2: formatselect, fontselect, fontsizeselect, bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, blockquote. Line 3: removeformat, hr, pagebreak, charmap, sub, sup, insertdate, inserttime, forecolor, backcolor, tablecontrols.
|
| value$ | The value$ property is used to load and retrieve the contents of the editor control. The control may be loaded with HTML code or plain text.
Note: The retrieved contents contain line feeds. |
Creating a Toolbar Layout
The PxPlus TinyMCE Editor interface includes four pre-defined editing toolbar layouts, simple, advanced, extended and fullpage, as described earlier. It is possible to create your own layouts simply by creating a text file with the specified plugins and line definitions. The line definitions specify the edit controls to include, and the plugins entry specifies plugins required by certain edit controls.
The text file with the layout definition must be placed in the *plus/inomads/add-ons/editors/tinymce/layouts/ directory. The file name you assign will be used as the value of the toolbarLayout$ property in the Nomads definition. The contents will consist of theme, plugins and theme_advanced_buttons<1-n> lines in the following format:
theme: "advanced", plugins: "list of comma-separated plugins required for special edit controls", theme_advanced_buttons1: "list of comma-separated buttons to appear on line 1", theme_advanced_buttons2: "list of comma-separated buttons to appear on line 2", theme_advanced_buttons3: "list of comma-separated buttons to appear on line 3", theme_advanced_buttons<n>: "optional additional lines",
By default, there are three rows of edit controls. To suppress a row, set the row to null (""). For example,
theme_advanced_buttons3: "",
Punctuation, i.e. colons, quotes and trailing commas, is required.
Visit http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference for a list of all buttons/controls available, and their plugin requirements.
Following are the text files for the existing pre-defined layouts:
*plus/inomads/add-ons/editors/tinymce/layouts/simple
theme: "advanced", plugins : "tabfocus", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft, justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "",
*plus/inomads/add-ons/editors/tinymce/layouts/advanced
theme : "advanced", plugins : "safari,tabfocus,preview,searchreplace,pagebreak", theme_advanced_buttons1 : "newdocument,|,preview,|,search,replace,|, removeformat,|,undo,redo,|,link,unlink,anchor,|,image,|,cleanup,code", theme_advanced_buttons2 : "fontselect,fontsizeselect,|,bold,italic, underline,strikethrough,|,forecolor,backcolor", theme_advanced_buttons3 : "justifyleft,justifycenter,justifyright, justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,hr, pagebreak,|,charmap,sub,sup",
*plus/inomads/add-ons/editors/tinymce/layouts/extended
theme : "advanced", plugins : "safari,tabfocus,print,preview,searchreplace,media,pagebreak, insertdatetime,table", theme_advanced_buttons1 : "newdocument,|,print,preview,|,search,replace,|, undo,redo,|,link,unlink,anchor,image,media,|,cleanup,code,|", theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,bold, italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright, justifyfull,|,bullist,numlist,|,outdent,indent,blockquote", theme_advanced_buttons3 : "removeformat,|,hr,pagebreak,|,charmap,sub,sup, insertdate,inserttime,|,forecolor,backcolor,|,tablecontrols",
*plus/inomads/add-ons/editors/tinymce/layouts/fullpage
Same as extended, but a fullpage control has been added at the beginning of the third line.
Note: The safari plugin which is included in the above examples solves various Safari compatibility issues. It may help to solve some known incompatibilities between TinyMCE and WebKit (the rendering engine used by Google Chrome and Safari browsers). This plugin will only be loaded if you are using Safari so Firefox or IE will not load it.
