HTML WYSIWYG editing behavior.
The behavior supports document container mode similar to <frame>/behavior:frame - it supports loading full <html>...</html> document in it.
that have this behavior applied by default:
<htmlarea>...</htmlarea>
editor;that this behavior knows about:
readonly
- declares that element is read only;content-style
- string, URL of .css file to apply to content of the editor. Use it when you need to apply editing specific styling.Richtext supports two content models, HTML fragment:
<htmlarea> <h2>Some HTML content</h2> <p>Line 2</p> <p>Line 3</p> </htmlarea>
and full document. In this case <htmlarea>
behaves as a <frame>
containing the document:
<htmlarea> <html> <body> <h2>Some HTML content</h2> <p>Line 2</p> <p>Line 3</p> </body> </html> </htmlarea>
Content model is determined by content loaded in it.
Together with the standard set of events (mouse, keyboard, focus) behavior: richtext generates:
string, reflects current status of content DOM - value gets/sets current HTML content. For the richtext DOM element property value is an alias of property html.
Formatting commands:
CTRL+D
- wraps current text run into <code>text</code>
;CTRL+NUMPAD1...6
- converts current text block to <h1>
...<h6>
;CTRL+NUMPAD7
- converts current block or text run to <pre>
;CTRL+NUMPAD0
- converts current block or text run to <p>
;CTRL+NUMPAD+
- indent current selection;CTRL+NUMPAD-
- unindent current selection;CTRL+NUMPAD.
- convert current selection to ordered list <ol>
/<li>
;CTRL+NUMPAD*
- convert current selection to unordered list <ul>
/<li>
;CTRL+NUMPAD/
- convert current selection to definition list <dl>
/<dt>/<dd>
;The htmlarea.execCommand(command,attributes)
method executes undoable editing command. The command string identifies command to execute.
Editing commands common to all editable elements ( <input|text>, <textarea>, <plaintext>, <htmlarea> ):
"edit:cut"
- cut selection - copy selection to the clipboard and remove it;"edit:copy"
- copy selection to the clipboard;"edit:paste"
- paste content of the clipboard;"edit:selectall"
- select whole content of the element;"edit:undo"
- undo last editing operation;"edit:redo"
- redo last operation that was undone;"edit:delete-next"
- if there is a selection - delete selected content, otherwise delete next character;"edit:delete-prev"
- if there is a selection - delete selected content, otherwise delete previous character;"edit:delete-word-next"
- if there is a selection - delete selected content, otherwise delete next word;"edit:delete-word-prev"
- if there is a selection - delete selected content, otherwise delete previous word;Commands specific to behavior:richtext
( <htmlarea>
):
"edit:insert-break"
- essentially this is "ENTER" (VK_RETURN) command, actual DOM modification depends on context;"edit:insert-soft-break"
- "SHIFT+ENTER" command, inserts <br>
separator but actual DOM modification depends on context;"format:apply-span:{tag-list}"
- wrap selection into span element, if the selection contains one of tags they will be removed.{tag-list}
is a pipe (|
) separated list of tag names. Example:execCommand("format:apply-span:b|strong")
- will wrap selection into <b>...</b>
while removing any other <b>
and <strong>
elements from the selection.execCommand("format:apply-span:font",{color:"#F00"})
- will wrap selection into <font color="#F00">...</font>
element."format:toggle-span:{tag-list}"
- if selection contains one of the tags - removes them, otherwise it does "format:apply-span:..."
action."format:toggle-list:{list-tag}"
- converts paragraphs in selection into a list. If selection is already a list of that type then items of the list will be converted tp simple paragraphs;{list-tag}
can be either ul
, ol
or dl
."format:toggle-pre"
- converts selection to or from <pre>
block."format:indent"
- wraps selected paragraphs into <blockquote>
or sub-list."format:unindent"
- unwraps selected paragraphs from <blockquote>
or moves sub-list to one level up."format:morph-block:{tag}"
- changes tags of selected block elements. This way current <blockquote>
can be changed to <p>
for example. Only block element that do not contain other display:block
elements can be morphed."format:unwrap-element:{tag}"
- moves content of the element to element's parent and removes (now empty) element from the DOM.Table editing operations. These operations are available only if selection is inside a table:
edit:insert-table-row:{before|after}
- inserts row before of after selected cells;edit:insert-table-column:{before|after}
- inserts column before of after selected cells;edit:merge-table-cells
- merge selected cell range into single cell (will add rowspan/colspan to the cell);edit:delete-table-rows
- deletes selected rows;edit:delete-table-columns
- deletes selected columns;edit:split-table-cells
- splits spanned cell into multiple cells.loadDocument
(url:string): true|false
loads file from URL into the editor;
saveDocument
(url:string): true|false
saves content to a file;
emptyDocument
(): true|false
initializes the editor by empty document;
sourceToContent
(html:string, url:string, selStart:integer, selEnd:integer): true|false
The method sets content from the html and selection from given selStart and selEnd.
This method does incremental content update - supposed to be used when you need to update content from HTML source code view as it preserves undo/redo operational stack.
contentToSource
() : [html:string, selStart:integer, selEnd:integer]
returns content and selection as an array of three elements;