Rich Text Editor SpecOct 28, 2005
Overview:
This is a specification for a Rich Text Editor Component for the next update to Open Laszlo 3.2. It is intended to provide basic HTML style rich text editing capabilities. The RTE component will be able to be customized by modifying attributes, as well as through extending or modifying the LZX code. The RTE component is fully supported in SOLO applications. The component will be delivered in source code form (LZX) under the Common Public License.
Initial Feature Set:- Font style (bold, italic, and underline)
- Font Face
- Font Color
- HyperLink Text
- The fontface and fontsize attributes may be used to set the initial state of the editor, either by declaring them in the tag or calling from Javascript (via setAttribute) before the user starts to interact with the editor.
- Supported key board operations
<li>Standard text entry and navigation keys: Shift, Caps Lock, Backspace, Enter, Up/Down/Left/Right arrows, Delete keys</li><li>Keyboard shortcuts (see table below)</li>
| User Views:
|
| The default view will just have a typical toolbar above the text being edited. If there is more text than will fit, a scrollbar should appear. Toolbar buttons will show 'tooltips' when the user hovers the mouse over the buttons.
|
|
Two of the commands require additional views.
| HyperLink Text
|
| When a user clicks on the "Link" button this dialog appears for the user to type in the link information and target. The Enter key, 'link' button, or or the 'close' button closes the dialog.
|
|
| Font Color Chooser
|
| When the user chooses a color, a color chooser must appear for them.
|
|
User Command Interface (and Keyboard Shortcuts)
| Command
| Key
| Behavior
|
cut
| ctrl-x
| If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control.
If there isn't a selection, nothing will happen.
|
copy
| ctrl-c
| If there is a selection, this command will copy the selection to the clipboard.
If there isn't a selection, nothing will happen.
|
paste
| ctrl-v
|
This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents.
|
bold
|
| If there is no selection, the insertion point will set bold for subsequently typed characters.
If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.
|
| underline
|
| If there is no selection, the insertion point will set underline for subsequently typed characters.
If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.
|
| italic
|
| If there is no selection, the insertion point will set italic for subsequently typed characters.
If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.
|
| fontface
|
| Will set the fontface for a selection or at the insertion point if there is no selection.
|
| fontcolor
|
| Will set the text color of the selection or at the insertion point if there is no selection.
|
| createlink
|
| This command will not do anything if no selection is made. If there is
a selection, a link will be inserted around the selection with the url parameter as the href of the link obtained from the dialog with a target of _blank, _self, _parent, _top.
|
| removeformat
|
| This command clears any link and any formatting properties of the current node resetting any text properties to the default.
|
Public Command Interface
| Command
| Args
| Behavior
|
| getHTMLText
|
| returns an html document
|
| setHTMLText
| HTMLTextString
| sets the contents of the RTE
|
| setTextFormat
| LzTextFormat,
startPosition,
endPosition
| sets the text format value of the range of characters specified
|
Default Values:
Values can be specified for the following attributes of the RTE component. If the user doesn't specify these values in the tag they default the values in the table below. Removing the format resets the text to the default text values.
| Attribute
| Default Value
|
| width
| 600
|
| height
| 300
|
| linkTarget
| _blank
|
| fontsize
| 12
|
| fontface
| sans
|
| fontcolor
| #000000
|
Usage Notes:
The simplest way to add rich text functionality to an application, is to declare the rich text editor with its default options:
<richtexteditor/>
A richtexteditor is a collection of the components that make it up. To create a new unique richtexteditor, one would assemble a different collection of elements
<richtexteditor>
<richtexttoolbar/>
<plainrichtexteditor/>
<my_special_decorative_border/>
</richtexteditor>
A richtexttoolbar is a collection of textformatcontrols and toolbar form panels. It is the controller for the elements that it contains. textformatcontrols can be button groups, single buttons, comboboxes, etc. For example, the simplest toolbar with bold, italic and underline buttons, would be declared like this:
<richtexttoolbar>
<boldformatcontrol/>
<underlineformatcontrol/>
<italicformatcontrol/>
</richtexttoolbar>
A plainrichtexteditor handles the formatting of the text as well as the key commands and navigation, but has no user-visible controls. It is where the text is actually edited. It will have attributes for it's default values. Example:
<plainrichtexteditor fontface="arial" fontsize="5" HTMLtarget="mywindow">
Font Faces Supported (system fonts)
Verdana
Arial
Helvetica
Courier
Times
Font Sizes Supported:
Flash does not support standard HTML font sizes so they are translated to the pixel sizes in the table below.
| HTML #
| Pixels
|
| 1
| 10
|
| 2
| 12
|
| 3
| 12
|
| 4
| 14
|
| 5
| 18
|
| 6
| 24
|
| 7
| 34
|
|
