SUI.control.HTMLEditControl

SUI.control.HTMLEditControl implements a WYSIWIG/HTML edit control. It should provide a standardized interface to the different implementations of contenteditable in various browsers. Because of code size of the class it is splitted in two parts: This class is extended from BaseHTMLEditControl which implements all of the technical structure. This part implements the actions that can be performed on the content.

Extends SUI.control.BaseHTMLEditControl
Defined in: control/HTMLEditControl.js

Constructor summary
Attr. Name / Description
public

SUI.control.HTMLEditControl(arg)

SUI.control.HTMLEditControl constructor

Member summary
Attr. Type Name Description
private SUI.Border

_border

The box's border.

private int

_bottom

The bottom position of the box.

private HTMLElementNode

_el

The box's element node.

private int

_height

The height of the box.

private int

_left

The left position of the box.

private int

_listeners

The listeners array.

private int

_maxHeight

The maximum height of the box.

private int

_maxWidth

The maximum width of the box.

private int

_minHeight

The minimum height of the box.

private int

_minWidth

The minimum width of the box.

private SUI.Padding

_padding

The box's padding.

private SUI.Box

_parent

The box's parent element.

private int

_right

The right position of the box.

private int

_top

The top position of the box.

private int

_width

The width of the box.

Method summary
Attr. Type Name / Description
public

_createSystemCSS()

Construct the system stylesheet. The system stylesheet gives the user visual feedback of 'invisible' things in the browser, like language marks, anchors, misspelled words etc.

public

_execCommand()

Excecute standard contenteditable commands

public

_fontFix()

The IE editor inserts font tags in the content. And since we like spans better we replace then. Note that we cripple the face attribute (f_Roman and s_100%). So we correct that too.

public

_getCurrentRange()

Get the current range object from the current selection in the editor (param sel is null) or a given selection.

public

_getParentElementSelection(sel)

Get the parent element node (no text node) of a given selection.

public

_getSelection()

Get the current selection in the editor

public

_ieEvent()

In IE's case we don't want to get the event from the window object but the iframe's window object instead

public

_ieFind()

Finding text in IE using their range object

public

_initGecko()

Gecko specific initialization for the contenteditable iframe

public

_initIE()

IE specific initialization for the contenteditable iframe

public

_initWebKit()

WebKit specific initialization for the contenteditable iframe

public

_onContextMenu()

Call host's onContexMenu and prevent the default context menu

public

_onFocus()

Call the onfocus listener

public

_onKeyDown()

Call host's onKeyDown

public

_onKeyUp()

Some stuff going on onKeyUp. Here we can fix some stuff that WebKit does wrong, and finish a past action. It also triggers _onSelectionChange in certain cases.

public

_onLoadIframe()

This onload handler is called when the initial generated empty document was inserted into the iframe. On this onload handler we further complete the initialization process and do some more interesting things like setting the contenteditable state, event handlers, set (if any) content, etc.

public

_onMouseUp()

On mouse-up: good chance that we've changed the selection

public

_onSelectionChange()

Try of we can detect if the cursor or selection moved to another node in the DOM tree

public

_onSelectionChangeIE()

Don't try of we can detect if the cursor or selection moved to another node in the DOM tree: IE does it for us. This is now only for IE 8 and below.

public

_outerHTML()

A browser independent implementation of outerHTML

public

_rangeSelectWord()

Select the word a the current range, but only if the range is collapsed. This is a creates a range and is not yet added to a selection.

public

_replaceNode()

Replace a node, use execCommand inserthtml if possible

public

_selectWord()

Select the word a the current cursor position, but only if the range is collapsed. It is a non-IE method but it is the way IE usually behaves, so we don't need it for that.

public

_setContentEditable()

Set contentEditable property of the body or otherwise sepecified elements

public

_spanFix()

execCommand fontsize is not supported very well. Therefore we use fontname instead. Non IE browsers will insert a span and we search for these spans and set to font size with the value set in the font family field.

public

_webKitImgFix()

Fix images in WebKit: let the user select images by clicking on them

public

_webKitImgFixOnClick()

Onclick handler for WebKit images. WebKit fails to select image when user clicks it

public

_webKitNoDivOnEnterFix()

Fix undesired behavior in WebKit: it inserts a DIV on an Enter in certain contexts (f.i. after a header or if there is no initial paragraph)

public

absPos()

Get the absolute position (top/left) of this box on the page. Note: You can only use this function if the HTML content of the page is fully rendered.

public

addClass(cls)

Add a CSS class name to the class list of the HTML element associated with the box.

public

addListener(type, listener)

Add/register a listener function. This way it is possible to register more than one listener function on one target.

public SUI.Border

border(b)

Get or set the border definition of the box.

public int

bottom(b)

Get or set the bottom of the box.

public

callListener(type)

Call a listener function. Execute the default and additional listener functions. Note: the framework should not execute the default listeners directly but always through this method to ensure the execution of additional listener functions.

public int

clientHeight()

Get the client height of the box. The client height is the height of the box minus the top and bottom border and padding width.

public int

clientWidth()

Get the client width of the box. The client width is the width of the box minus the left and right border and padding width.

public Object

commandsEnabled()

Return an object containing the command that are enabled given the current cursor position/selection in the editor. the following command are supported: cut, copy, paste, undo, redo, link, image, anchor, pageBreak, removeFormatting, orderedList, unorderedList, indent, deIndent.

public Object

commandStates()

Return an object containing the command state of the commands applicable at the current cursor position/selection in the editor. the following commands are supported: bold, underline, italic, justifyleft, justifyCenter, justifyRight.

public

display()

Display the box. Set the CSS positions of the element's box(es) and of the children of the box.

public

doBackColor(col)

Set the background color of the current editor selection. This command transfers the focus to the editor.

public

doBold()

Toggle the bold state of the current editor selection. This command transfers the focus to the editor.

public boolean

doFind(what, caseSensitive, backward, wholeWord)

Find text in the editor. Gecko ignores the wholeWord parameter.

public

doFontName(val)

Set the font of the current editor selection. This command transfers the focus to the editor.

public

doFontSize(val)

Set the font size of the current editor selection. This command transfers the focus to the editor.

public

doForeColor(col)

Set the foreground color of the current editor selection. This command transfers the focus to the editor.

public

doFormatBlock(val)

Format the block that is currently selected (ie. P, H1, H2 etc) This command transfers the focus to the editor.

public HTMLElementNode

doGetAbbr()

Get the acronym node that is parent to the current editor selection.

public HTMLElementNode

doGetImg()

Get the selected image is selected in the editor. Note: for IE we return a reference to the img node, for other browsers we create a copy.

public HTMLElementNode

doGetLang()

Get the span:lang node that is parent to the current editor selection.

public HTMLElementNode

doGetLink()

Get the a node that is parent to the current editor selection.

public

doIndent()

Indent the current paragraph or create a deeper level in a list. This command transfers the focus to the editor.

public

doInsertAbbr(fullText)

Insert a acronym node into the editor content. Unfortunately no abbr because IE does not support this. The acronym gets the 'sys_abbr' system style. This command transfers the focus to the editor.

public

doInsertAnchor(name)

Insert an anchor node into the editor content. The anchor gets the 'sys_anchor' system style. This command transfers the focus to the editor.

public

doInsertHorizontalRule()

Insert a horizontal ruler into the editor content. This command transfers the focus to the editor.

public

doInsertHTML(html)

Insert any html you like into the editor content. This command transfers the focus to the editor.

public

doInsertImg(img)

Insert an image into the editor content. This command transfers the focus to the editor.

public

doInsertInlineElement(tag, attr)

Insert an inline element into the editor content. This command transfers the focus to the editor.

public

doInsertLang(language)

Insert a language mark into the editor content. The language mark gets the 'sys_anchor' system style. This command transfers the focus to the editor.

public

doInsertLink(attr)

Insert a hyperlink into the editor content. This command transfers the focus to the editor.

public

doInsertNode(node)

Insert an node into the editor content. Unlike doInsertInlineElement this command overwrites the current selection. This command transfers the focus to the editor.

public

doInsertOrderedList()

Change a paragraph into the first element of (or a couple of paragraphs into) an ordered list. This command transfers the focus to the editor.

public

doInsertUnorderedList()

Change a paragraph into the first element of (or a couple of paragraphs into) an unordered list. This command transfers the focus to the editor.

public

doItalic()

Toggle the italic state of the current editor selection. This command transfers the focus to the editor.

public

doJustifyCenter()

Justify current editor paragraph or paragraphs in a selection to the Center. This command transfers the focus to the editor.

public

doJustifyLeft()

Justify current editor paragraph or paragraphs in a selection to the Left. This command transfers the focus to the editor.

public

doJustifyRight()

Justify current editor paragraph or paragraphs in a selection to the Right. This command transfers the focus to the editor.

public

doOutdent()

De-indent the current paragraph or move a list item to a higher level in a list. This command transfers the focus to the editor.

public

doRedo()

Move up on the editor's undo stack. This command transfers the focus to the editor.

public

doRemoveAnchor(link)

Remove an anchor from the editor content. This command transfers the focus to the editor.

public

doRemoveFormat()

Remove all formatting from the current editor selection. This command transfers the focus to the editor.

public

doRemoveLink(link)

Remove all formatting from the current editor selection.

public

doRemoveNode(el)

Remove node from the editor but keep its contents.

public

doReplace(text)

Replace selected text in the editor (think search and replace). There needs to be selected text, this is not a text insert function.

public boolean

doReplaceAll(what, text, caseSensitive, backward, wholeWord)

Replace all occurances of a text in the editor. The search direction is ignored: replaceAll from current cursor position might be implemented in the future. Gecko ignores the wholeWord parameter.

public

doSelectAll()

Select the whole content of the editor. This command transfers the focus to the editor.

public

doUnderline()

Toggle the underline state of the current editor selection. This command transfers the focus to the editor.

public

doUndo()

Move down on the editor's undo stack. This command transfers the focus to the editor.

public

doUpdateAbbr(el, fullText)

Update an abbreviation in the editor content. This command transfers the focus to the editor.

public

doUpdateAnchor(link, name)

Update an anchor element in the editor content. This command transfers the focus to the editor.

public

doUpdateImg(img)

Update an image element in the editor content. This command transfers the focus to the editor.

public

doUpdateInlineElement(el, attr)

Update an inline element in the editor content. This command transfers the focus to the editor.

public

doUpdateLang(el, language)

Update a language mark in the editor content. This command transfers the focus to the editor.

public

doUpdateLink(link, attr)

Update a link in the editor content. This command transfers the focus to the editor.

public

draw()

Draw the box on the screen. It executes a two phase process: a layout phase in which the size and positions of the box (and of it's contents, for more complex derivatives) is calculated and a display phase in which the CSS size and position of the box's (and possible it's child elements) is set.

public HTMLElementNode

el()

Get the HTML element node of the box.

public

focus()

Set the focus to the editable region.

public

geckoForceOnloadEvent()

Force an onload event to happen to (Gecko refuses to do an onload if the iframe in initially hidden, so you can use this)

public String

getCurrentBlockFormat()

Get the block format at the current cursor position.

public HTMLElementNode

getDocument()

Get a reference to the document object of the page in the editor

public HTMLElementNode

getSelectedElement()

Get the element that's currently selected in the editor

public String

getValue()

Get HTML content for the edit control. Throws {ReferenceError} if the editor was not fully loaded yet

public int

height(h)

Get or set the height of the box.

public boolean

ieStrictMode()

Is the editor document in strict mode. This value can only be false in IE, it returns always true (and also not affects) other browsers.

public

initBlockFormats(blockFormats)

Tell the HTML edit control which block formats you want to use

public

layOut()

SUI framework layOut method

public int

left(l)

Get or set the left of the box.

public int

maxHeight(mh)

Get or set the maximum height of the box.

public int

maxWidth(mw)

Get or set the maximum width of the box.

public int

minHeight(mh)

Get or set the minimum height of the box.

public int

minWidth(mw)

Get or set the minimum width of the box.

public

onCommandExecuted()

Fires after an editor command is executed (and content is changed), an important trigger for updating your user interface.

public

onContextMenu(x, y)

Fires when the user selects the wrong mouse button

public

onFocus(evnt)

Fires when the document body in the editor window (iframe) receives the focus.

public

onKeyDown(evnt)

Fires when the user presses (the) any key

public

onLoad()

Fires after the content is set into the editor with setValue

public

onSelectionChange()

Fires when the user selects (moves it cursor) to an other element in the DOM tree, an important trigger for updating your user interface.

public SUI.Padding

padding(p)

Get or set the padding definition of the box.

public SUI.Box

parent(p)

Get or set the parent box of the box. When setting the parent the box's element node will be appended to the parent box's HTML element node.

public string

pasteMethod(p)

Get or set the paste method to use wehn pasting.

public

removeBox()

Remove a box from the DOM tree.

public

removeClass(cls)

Remove a CSS class name from the class list of the HTML element associated with the box.

public

resetIframe()

Clear the contents of the control

public int

right(r)

Get or set the right of the box.

public

setCSS(styleDef, classNameBody, styleSheets)

Supply CSS data for the edit control. The current CSS style code and linked stylesheets are removed. First the external style sheets are linked in the order they are provided, then the CSS code is appended.

public

setDim()

Set the CSS dimensions of this box and it's borders and padding. This is typically used in display functions to display boxes at the size and position that was calculated during layout.

public

setEditableElementIds(ids)

TODO

public

setPos()

Set the CSS postion of this box. This is typically used in display functions to display boxes at position that was calculated during layout. Note: use setDim if you want to set the position and size of the box.

public

setRect(t, l, w, h)

Set the top, left, width and height of a box in one go.

public

setValue(val)

Set HTML content for the edit control. Calls the onload handler when the data is fully loaded.

public int

top(t)

Get or set the top of the box.

public int

width(w)

Get or set the width of the box.

 

Constructor

public SUI.control.HTMLEditControl( object arg)

SUI.control.HTMLEditControl constructor

Parameters:
Name Type Argument Default Description
Object arg.elemAttr <optional>
 Additional (element) attributes for the box's element given as an object containing name and value pairs.
Object arg.anchor <optional>
 {left: true, top: true} The anchors for the box.
SUI.Border arg.border <optional>
 new SUI.Border() the border (width) of the box. Note: don't edit the border's members, you'll edit the boxes prototype. Assign a new SUI.Border object instead.
int arg.bottom <optional>
 0 The bottom position of the box.
int arg.height <optional>
 0 The height of the box.
int arg.id <optional>
 auto generated The id of the HTML element of the box.
int arg.left <optional>
 0 The left position of the box.
int arg.maxHeight <optional>
 1000000 The maximum height of the box.
int arg.minHeight <optional>
 0 The minimal height of the box.
int arg.maxWidth <optional>
 100000 The maximal width of the box.
int arg.minWidth <optional>
 0 The minimal width of the box.
SUI.Padding arg.padding <optional>
 new SUI.Padding() the padding of the box. Note: don't edit the padding's members, you'll edit the boxes prototype. Assign a new SUI.Padding object instead.
SUI.Box arg.parent <optional>
 the parent box of the box.
int arg.right <optional>
 0 The right position of the box.
String arg.tag <optional>
 "DIV" An alternative tag name for the box.
int arg.top <optional>
 0 The top position of the box.
int arg.width <optional>
 0 The width of the box.
boolean arg.ieStrictMode Whether strict mode should be used in IE
Function arg.onCommandExecuted event handler, see onCommandExecuted()
Function arg.onContextMenu event handler, see onContextMenu()
Function arg.onFocus event handler, see onFocus()
Function arg.onKeyDown event handler, see onKeyDown()
Function arg.onLoad event handler, see onLoad()
Function arg.onSelectionChange event handler, see onSelectionChange()
Function arg.onContextMenu event handler, see onContextMenu()
Function arg.onKeyDown event handler, see onKeyDown()
Function arg.onLoad event handler, see onLoad()
Function arg.onSelectionChange event handler, see onSelectionChange()

View source: control/HTMLEditControl.js, line 61

Members

private SUI.Border _border

The box's border.

Inherited From: SUI.control.BaseHTMLEditControl#_border

View source: Box.js, line 672

private int _bottom

The bottom position of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_bottom

View source: Box.js, line 679

private HTMLElementNode _el

The box's element node.

Inherited From: SUI.control.BaseHTMLEditControl#_el

View source: Box.js, line 686

private int _height

The height of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_height

View source: Box.js, line 693

private int _left

The left position of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_left

View source: Box.js, line 700

private int _listeners

The listeners array.

Inherited From: SUI.control.BaseHTMLEditControl#_listeners

View source: Box.js, line 707

private int _maxHeight

The maximum height of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_maxHeight

View source: Box.js, line 714

private int _maxWidth

The maximum width of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_maxWidth

View source: Box.js, line 721

private int _minHeight

The minimum height of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_minHeight

View source: Box.js, line 728

private int _minWidth

The minimum width of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_minWidth

View source: Box.js, line 735

private SUI.Padding _padding

The box's padding.

Inherited From: SUI.control.BaseHTMLEditControl#_padding

View source: Box.js, line 742

private SUI.Box _parent

The box's parent element.

Inherited From: SUI.control.BaseHTMLEditControl#_parent

View source: Box.js, line 749

private int _right

The right position of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_right

View source: Box.js, line 756

private int _top

The top position of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_top

View source: Box.js, line 763

private int _width

The width of the box.

Inherited From: SUI.control.BaseHTMLEditControl#_width

View source: Box.js, line 770

Methods

public _createSystemCSS()

Construct the system stylesheet. The system stylesheet gives the user visual feedback of 'invisible' things in the browser, like language marks, anchors, misspelled words etc.

Inherited From: SUI.control.BaseHTMLEditControl#_createSystemCSS

View source: control/BaseHTMLEditControl.js, line 597

public _execCommand()

Excecute standard contenteditable commands

Inherited From: SUI.control.BaseHTMLEditControl#_execCommand

View source: control/BaseHTMLEditControl.js, line 655

public _fontFix()

The IE editor inserts font tags in the content. And since we like spans better we replace then. Note that we cripple the face attribute (f_Roman and s_100%). So we correct that too.

Inherited From: SUI.control.BaseHTMLEditControl#_fontFix

View source: control/BaseHTMLEditControl.js, line 711

public _getCurrentRange()

Get the current range object from the current selection in the editor (param sel is null) or a given selection.

Inherited From: SUI.control.BaseHTMLEditControl#_getCurrentRange

View source: control/BaseHTMLEditControl.js, line 764

public _getParentElementSelection(sel)

Get the parent element node (no text node) of a given selection.

Parameters:
Name Type Description
sel A selection

Inherited From: SUI.control.BaseHTMLEditControl#_getParentElementSelection

View source: control/BaseHTMLEditControl.js, line 783

public _getSelection()

Get the current selection in the editor

Inherited From: SUI.control.BaseHTMLEditControl#_getSelection

View source: control/BaseHTMLEditControl.js, line 813

public _ieEvent()

In IE's case we don't want to get the event from the window object but the iframe's window object instead

Inherited From: SUI.control.BaseHTMLEditControl#_ieEvent

View source: control/BaseHTMLEditControl.js, line 823

public _ieFind()

Finding text in IE using their range object

Inherited From: SUI.control.BaseHTMLEditControl#_ieFind

View source: control/BaseHTMLEditControl.js, line 831

public _initGecko()

Gecko specific initialization for the contenteditable iframe

Inherited From: SUI.control.BaseHTMLEditControl#_initGecko

View source: control/BaseHTMLEditControl.js, line 909

public _initIE()

IE specific initialization for the contenteditable iframe

Inherited From: SUI.control.BaseHTMLEditControl#_initIE

View source: control/BaseHTMLEditControl.js, line 939

public _initWebKit()

WebKit specific initialization for the contenteditable iframe

Inherited From: SUI.control.BaseHTMLEditControl#_initWebKit

View source: control/BaseHTMLEditControl.js, line 1014

public _onContextMenu()

Call host's onContexMenu and prevent the default context menu

Inherited From: SUI.control.BaseHTMLEditControl#_onContextMenu

View source: control/BaseHTMLEditControl.js, line 1024

public _onFocus()

Call the onfocus listener

Inherited From: SUI.control.BaseHTMLEditControl#_onFocus

View source: control/BaseHTMLEditControl.js, line 1037

public _onKeyDown()

Call host's onKeyDown

Inherited From: SUI.control.BaseHTMLEditControl#_onKeyDown

View source: control/BaseHTMLEditControl.js, line 1047

public _onKeyUp()

Some stuff going on onKeyUp. Here we can fix some stuff that WebKit does wrong, and finish a past action. It also triggers _onSelectionChange in certain cases.

Inherited From: SUI.control.BaseHTMLEditControl#_onKeyUp

View source: control/BaseHTMLEditControl.js, line 1078

public _onLoadIframe()

This onload handler is called when the initial generated empty document was inserted into the iframe. On this onload handler we further complete the initialization process and do some more interesting things like setting the contenteditable state, event handlers, set (if any) content, etc.

Inherited From: SUI.control.BaseHTMLEditControl#_onLoadIframe

View source: control/BaseHTMLEditControl.js, line 1110

public _onMouseUp()

On mouse-up: good chance that we've changed the selection

Inherited From: SUI.control.BaseHTMLEditControl#_onMouseUp

View source: control/BaseHTMLEditControl.js, line 1250

public _onSelectionChange()

Try of we can detect if the cursor or selection moved to another node in the DOM tree

Inherited From: SUI.control.BaseHTMLEditControl#_onSelectionChange

View source: control/BaseHTMLEditControl.js, line 1258

public _onSelectionChangeIE()

Don't try of we can detect if the cursor or selection moved to another node in the DOM tree: IE does it for us. This is now only for IE 8 and below.

Inherited From: SUI.control.BaseHTMLEditControl#_onSelectionChangeIE

View source: control/BaseHTMLEditControl.js, line 1303

public _outerHTML()

A browser independent implementation of outerHTML

Inherited From: SUI.control.BaseHTMLEditControl#_outerHTML

View source: control/BaseHTMLEditControl.js, line 1310

public _rangeSelectWord()

Select the word a the current range, but only if the range is collapsed. This is a creates a range and is not yet added to a selection.

Inherited From: SUI.control.BaseHTMLEditControl#_rangeSelectWord

View source: control/BaseHTMLEditControl.js, line 1326

public _replaceNode()

Replace a node, use execCommand inserthtml if possible

Inherited From: SUI.control.BaseHTMLEditControl#_replaceNode

View source: control/BaseHTMLEditControl.js, line 1396

public _selectWord()

Select the word a the current cursor position, but only if the range is collapsed. It is a non-IE method but it is the way IE usually behaves, so we don't need it for that.

Inherited From: SUI.control.BaseHTMLEditControl#_selectWord

View source: control/BaseHTMLEditControl.js, line 1424

public _setContentEditable()

Set contentEditable property of the body or otherwise sepecified elements

Inherited From: SUI.control.BaseHTMLEditControl#_setContentEditable

View source: control/BaseHTMLEditControl.js, line 1450

public _spanFix()

execCommand fontsize is not supported very well. Therefore we use fontname instead. Non IE browsers will insert a span and we search for these spans and set to font size with the value set in the font family field.

Inherited From: SUI.control.BaseHTMLEditControl#_spanFix

View source: control/BaseHTMLEditControl.js, line 681

public _webKitImgFix()

Fix images in WebKit: let the user select images by clicking on them

Inherited From: SUI.control.BaseHTMLEditControl#_webKitImgFix

View source: control/BaseHTMLEditControl.js, line 1495

public _webKitImgFixOnClick()

Onclick handler for WebKit images. WebKit fails to select image when user clicks it

Inherited From: SUI.control.BaseHTMLEditControl#_webKitImgFixOnClick

View source: control/BaseHTMLEditControl.js, line 1516

public _webKitNoDivOnEnterFix()

Fix undesired behavior in WebKit: it inserts a DIV on an Enter in certain contexts (f.i. after a header or if there is no initial paragraph)

Inherited From: SUI.control.BaseHTMLEditControl#_webKitNoDivOnEnterFix

View source: control/BaseHTMLEditControl.js, line 1529

public absPos()

Get the absolute position (top/left) of this box on the page. Note: You can only use this function if the HTML content of the page is fully rendered.

Inherited From: SUI.control.BaseHTMLEditControl#absPos

View source: Box.js, line 202

public addClass( String cls)

Add a CSS class name to the class list of the HTML element associated with the box.

Parameters:
Name Type Description
String cls the CSS class name to add

Inherited From: SUI.control.BaseHTMLEditControl#addClass

View source: Box.js, line 229

public addListener( String type, Function listener)

Add/register a listener function. This way it is possible to register more than one listener function on one target.

Parameters:
Name Type Description
String type The listener type (i.e. "onClick", "onOK", etc).
Function listener The listener function.

Inherited From: SUI.control.BaseHTMLEditControl#addListener

View source: Box.js, line 239

public SUI.Border border( SUI.Border b)

Get or set the border definition of the box.

Parameters:
Name Type Argument Description
SUI.Border b <optional>
 The new border definition (or none to use this method as a getter).

Returns:

SUI.Border the border definition of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#border

View source: Box.js, line 259

public int bottom( int b)

Get or set the bottom of the box.

Parameters:
Name Type Argument Description
int b <optional>
 The new bottom of the box (or none to use this method as a getter).

Returns:

int The bottom of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#bottom

View source: Box.js, line 302

public callListener( String type)

Call a listener function. Execute the default and additional listener functions. Note: the framework should not execute the default listeners directly but always through this method to ensure the execution of additional listener functions.

Parameters:
Name Type Description
String type The listener type (i.e. "onClick", "onOK", etc).

Inherited From: SUI.control.BaseHTMLEditControl#callListener

View source: Box.js, line 275

public int clientHeight()

Get the client height of the box. The client height is the height of the box minus the top and bottom border and padding width.

Returns:

int The client height of the box.

Inherited From: SUI.control.BaseHTMLEditControl#clientHeight

View source: Box.js, line 312

public int clientWidth()

Get the client width of the box. The client width is the width of the box minus the left and right border and padding width.

Returns:

int The client width of the box.

Inherited From: SUI.control.BaseHTMLEditControl#clientWidth

View source: Box.js, line 322

public Object commandsEnabled()

Return an object containing the command that are enabled given the current cursor position/selection in the editor. the following command are supported: cut, copy, paste, undo, redo, link, image, anchor, pageBreak, removeFormatting, orderedList, unorderedList, indent, deIndent.

Returns:

Object an object with the enabled state of all supported commands

View source: control/HTMLEditControl.js, line 74

public Object commandStates()

Return an object containing the command state of the commands applicable at the current cursor position/selection in the editor. the following commands are supported: bold, underline, italic, justifyleft, justifyCenter, justifyRight.

Returns:

Object an object with the state of all supported commands

View source: control/HTMLEditControl.js, line 122

public display()

Display the box. Set the CSS positions of the element's box(es) and of the children of the box.

Inherited From: SUI.control.BaseHTMLEditControl#display

View source: Box.js, line 331

public doBackColor( String col)

Set the background color of the current editor selection. This command transfers the focus to the editor.

Parameters:
Name Type Description
String col CSS color to set the background to

View source: control/HTMLEditControl.js, line 142

public doBold()

Toggle the bold state of the current editor selection. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 164

public boolean doFind( String what, boolean caseSensitive, boolean backward, boolean wholeWord)

Find text in the editor. Gecko ignores the wholeWord parameter.

Parameters:
Name Type Description
String what text to search
boolean caseSensitive case sensitive search
boolean backward search directions
boolean wholeWord search on whole words only (not Gecko)

Returns:

boolean true if the text was found

View source: control/HTMLEditControl.js, line 178

public doFontName( String val)

Set the font of the current editor selection. This command transfers the focus to the editor.

Parameters:
Name Type Description
String val The font name (prefixed by "f_")

View source: control/HTMLEditControl.js, line 203

public doFontSize( String val)

Set the font size of the current editor selection. This command transfers the focus to the editor.

Parameters:
Name Type Description
String val The font size (prefixed by "s_")

View source: control/HTMLEditControl.js, line 225

public doForeColor( String col)

Set the foreground color of the current editor selection. This command transfers the focus to the editor.

Parameters:
Name Type Description
String col CSS color to set the background to

View source: control/HTMLEditControl.js, line 250

public doFormatBlock( String val)

Format the block that is currently selected (ie. P, H1, H2 etc) This command transfers the focus to the editor.

Parameters:
Name Type Description
String val the block format tag name

View source: control/HTMLEditControl.js, line 274

public HTMLElementNode doGetAbbr()

Get the acronym node that is parent to the current editor selection.

Returns:

HTMLElementNode the parent acronym node or null if there is none

View source: control/HTMLEditControl.js, line 284

public HTMLElementNode doGetImg()

Get the selected image is selected in the editor. Note: for IE we return a reference to the img node, for other browsers we create a copy.

Returns:

HTMLElementNode an img node or null if there is none

View source: control/HTMLEditControl.js, line 339

public HTMLElementNode doGetLang()

Get the span:lang node that is parent to the current editor selection.

Returns:

HTMLElementNode the parent span:lang node or null if there is none

View source: control/HTMLEditControl.js, line 302

public HTMLElementNode doGetLink()

Get the a node that is parent to the current editor selection.

Returns:

HTMLElementNode the parent a node or null if there is none

View source: control/HTMLEditControl.js, line 320

public doIndent()

Indent the current paragraph or create a deeper level in a list. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 379

public doInsertAbbr( String fullText)

Insert a acronym node into the editor content. Unfortunately no abbr because IE does not support this. The acronym gets the 'sys_abbr' system style. This command transfers the focus to the editor.

Parameters:
Name Type Description
String fullText the full text for the abbreviation

View source: control/HTMLEditControl.js, line 391

public doInsertAnchor( String name)

Insert an anchor node into the editor content. The anchor gets the 'sys_anchor' system style. This command transfers the focus to the editor.

Parameters:
Name Type Description
String name the name for the anchor

View source: control/HTMLEditControl.js, line 402

public doInsertHorizontalRule()

Insert a horizontal ruler into the editor content. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 411

public doInsertHTML( String html)

Insert any html you like into the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
String html the HTML code to insert

View source: control/HTMLEditControl.js, line 421

public doInsertImg( HTMLElementNode img)

Insert an image into the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode img an HTML image node to insert

View source: control/HTMLEditControl.js, line 443

public doInsertInlineElement( String tag, Object attr)

Insert an inline element into the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
String tag The html tag name of the element
Object attr an object with name-values pairs

View source: control/HTMLEditControl.js, line 473

public doInsertLang( String language)

Insert a language mark into the editor content. The language mark gets the 'sys_anchor' system style. This command transfers the focus to the editor.

Parameters:
Name Type Description
String language a language code

View source: control/HTMLEditControl.js, line 572

public doInsertLink( Object attr)

Insert a hyperlink into the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
Object attr the attributes of the link

View source: control/HTMLEditControl.js, line 582

public doInsertNode( HTMLElementNode node)

Insert an node into the editor content. Unlike doInsertInlineElement this command overwrites the current selection. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode node The node to insert

View source: control/HTMLEditControl.js, line 656

public doInsertOrderedList()

Change a paragraph into the first element of (or a couple of paragraphs into) an ordered list. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 666

public doInsertUnorderedList()

Change a paragraph into the first element of (or a couple of paragraphs into) an unordered list. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 676

public doItalic()

Toggle the italic state of the current editor selection. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 685

public doJustifyCenter()

Justify current editor paragraph or paragraphs in a selection to the Center. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 696

public doJustifyLeft()

Justify current editor paragraph or paragraphs in a selection to the Left. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 706

public doJustifyRight()

Justify current editor paragraph or paragraphs in a selection to the Right. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 716

public doOutdent()

De-indent the current paragraph or move a list item to a higher level in a list. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 726

public doRedo()

Move up on the editor's undo stack. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 735

public doRemoveAnchor( HTMLElementNode link)

Remove an anchor from the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode link reference to the anchor element to remove

View source: control/HTMLEditControl.js, line 745

public doRemoveFormat()

Remove all formatting from the current editor selection. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 758

public doRemoveLink( HTMLElementNode link)

Remove all formatting from the current editor selection.

Parameters:
Name Type Description
HTMLElementNode link reference to the anchor element to remove

View source: control/HTMLEditControl.js, line 790

public doRemoveNode( HTMLElementNode el)

Remove node from the editor but keep its contents.

Parameters:
Name Type Description
HTMLElementNode el reference to the node to remove

View source: control/HTMLEditControl.js, line 802

public doReplace( String text)

Replace selected text in the editor (think search and replace). There needs to be selected text, this is not a text insert function.

Parameters:
Name Type Description
String text text to replace the selected text

View source: control/HTMLEditControl.js, line 831

public boolean doReplaceAll( String what, String text, boolean caseSensitive, boolean backward, boolean wholeWord)

Replace all occurances of a text in the editor. The search direction is ignored: replaceAll from current cursor position might be implemented in the future. Gecko ignores the wholeWord parameter.

Parameters:
Name Type Description
String what text to search and replace
String text new text
boolean caseSensitive case sensitive search
boolean backward search direction, ignored: always foreward
boolean wholeWord search on whole words only

Returns:

boolean the number of replacements made

View source: control/HTMLEditControl.js, line 868

public doSelectAll()

Select the whole content of the editor. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 920

public doUnderline()

Toggle the underline state of the current editor selection. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 929

public doUndo()

Move down on the editor's undo stack. This command transfers the focus to the editor.

View source: control/HTMLEditControl.js, line 939

public doUpdateAbbr( HTMLElementNode el, String fullText)

Update an abbreviation in the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode el a reference to the abbreviation element to update
String fullText the new full text for the abbreviation

View source: control/HTMLEditControl.js, line 951

public doUpdateAnchor( HTMLElementNode link, String name)

Update an anchor element in the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode link a reference to the anchor element to update
String name the new anchor name

View source: control/HTMLEditControl.js, line 962

public doUpdateImg( HTMLElementNode img)

Update an image element in the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode img te new image node to replace the old one

View source: control/HTMLEditControl.js, line 972

public doUpdateInlineElement( HTMLElementNode el, Object attr)

Update an inline element in the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode el a reference to element to update
Object attr the new attributes for the element

View source: control/HTMLEditControl.js, line 991

public doUpdateLang( HTMLElementNode el, String language)

Update a language mark in the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode el a reference to the language mark to update
String language the new language code for the marker

View source: control/HTMLEditControl.js, line 1026

public doUpdateLink( HTMLElementNode link, String attr)

Update a link in the editor content. This command transfers the focus to the editor.

Parameters:
Name Type Description
HTMLElementNode link a reference to the link to update
String attr the new attributes for the link

View source: control/HTMLEditControl.js, line 1036

public draw()

Draw the box on the screen. It executes a two phase process: a layout phase in which the size and positions of the box (and of it's contents, for more complex derivatives) is calculated and a display phase in which the CSS size and position of the box's (and possible it's child elements) is set.

Inherited From: SUI.control.BaseHTMLEditControl#draw

View source: Box.js, line 344

public HTMLElementNode el()

Get the HTML element node of the box.

Returns:

HTMLElementNode the HTML element node of the box.

Inherited From: SUI.control.BaseHTMLEditControl#el

View source: Box.js, line 353

public focus()

Set the focus to the editable region.

Inherited From: SUI.control.BaseHTMLEditControl#focus

View source: control/BaseHTMLEditControl.js, line 155

public geckoForceOnloadEvent()

Force an onload event to happen to (Gecko refuses to do an onload if the iframe in initially hidden, so you can use this)

Inherited From: SUI.control.BaseHTMLEditControl#geckoForceOnloadEvent

View source: control/BaseHTMLEditControl.js, line 393

public String getCurrentBlockFormat()

Get the block format at the current cursor position.

Returns:

String tag name of the block where the cursor is located

Inherited From: SUI.control.BaseHTMLEditControl#getCurrentBlockFormat

View source: control/BaseHTMLEditControl.js, line 178

public HTMLElementNode getDocument()

Get a reference to the document object of the page in the editor

Returns:

HTMLElementNode document element of the page being edited

Inherited From: SUI.control.BaseHTMLEditControl#getDocument

View source: control/BaseHTMLEditControl.js, line 188

public HTMLElementNode getSelectedElement()

Get the element that's currently selected in the editor

Returns:

HTMLElementNode the element node currently selected in the editor

Inherited From: SUI.control.BaseHTMLEditControl#getSelectedElement

View source: control/BaseHTMLEditControl.js, line 197

public String getValue()

Get HTML content for the edit control. Throws {ReferenceError} if the editor was not fully loaded yet

Returns:

String HTML data fragment from editor (no a top container)

Inherited From: SUI.control.BaseHTMLEditControl#getValue

View source: control/BaseHTMLEditControl.js, line 206

public int height( int h)

Get or set the height of the box.

Parameters:
Name Type Argument Description
int h <optional>
 The new height of the box (or none to use this method as a getter).

Returns:

int The height of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#height

View source: Box.js, line 364

public boolean ieStrictMode()

Is the editor document in strict mode. This value can only be false in IE, it returns always true (and also not affects) other browsers.

Returns:

boolean Whether the editor document is in strict mode.

Inherited From: SUI.control.BaseHTMLEditControl#ieStrictMode

View source: control/BaseHTMLEditControl.js, line 229

public initBlockFormats( string[] blockFormats)

Tell the HTML edit control which block formats you want to use

Parameters:
Name Type Description
string[] blockFormats array in which each element has a value key containing a block tag (P, H1 ... H6)

Inherited From: SUI.control.BaseHTMLEditControl#initBlockFormats

View source: control/BaseHTMLEditControl.js, line 238

public layOut()

SUI framework layOut method

Inherited From: SUI.control.BaseHTMLEditControl#layOut

View source: control/BaseHTMLEditControl.js, line 303

public int left( int l)

Get or set the left of the box.

Parameters:
Name Type Argument Description
int l <optional>
 The new left of the box (or none to use this method as a getter).

Returns:

int The left of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#left

View source: Box.js, line 403

public int maxHeight( int mh)

Get or set the maximum height of the box.

Parameters:
Name Type Argument Description
int mh <optional>
 The new maximum height of the box (or none to use this method as a getter).

Returns:

int The maximum height of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#maxHeight

View source: Box.js, line 414

public int maxWidth( int mw)

Get or set the maximum width of the box.

Parameters:
Name Type Argument Description
int mw <optional>
 The new maximum width of the box (or none to use this method as a getter).

Returns:

int The maximum width of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#maxWidth

View source: Box.js, line 433

public int minHeight( int mh)

Get or set the minimum height of the box.

Parameters:
Name Type Argument Description
int mh <optional>
 The new minimum height of the box (or none to use this method as a getter).

Returns:

int The minimum height of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#minHeight

View source: Box.js, line 452

public int minWidth( int mw)

Get or set the minimum width of the box.

Parameters:
Name Type Argument Description
int mw <optional>
 The new minimum width of the box (or none to use this method as a getter).

Returns:

int The minimum width of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#minWidth

View source: Box.js, line 471

public onCommandExecuted()

Fires after an editor command is executed (and content is changed), an important trigger for updating your user interface.

Inherited From: SUI.control.BaseHTMLEditControl#onCommandExecuted

View source: control/BaseHTMLEditControl.js, line 318

public onContextMenu( int x, int y)

Fires when the user selects the wrong mouse button

Parameters:
Name Type Description
int x x-offset (downwards) of the mouse click
int y y-offset of the mouse click

Inherited From: SUI.control.BaseHTMLEditControl#onContextMenu

View source: control/BaseHTMLEditControl.js, line 326

public onFocus( SUI.Event evnt)

Fires when the document body in the editor window (iframe) receives the focus.

Parameters:
Name Type Description
SUI.Event evnt focus event

Inherited From: SUI.control.BaseHTMLEditControl#onFocus

View source: control/BaseHTMLEditControl.js, line 334

public onKeyDown( SUI.Event evnt)

Fires when the user presses (the) any key

Parameters:
Name Type Description
SUI.Event evnt keydown event

Inherited From: SUI.control.BaseHTMLEditControl#onKeyDown

View source: control/BaseHTMLEditControl.js, line 341

public onLoad()

Fires after the content is set into the editor with setValue

Inherited From: SUI.control.BaseHTMLEditControl#onLoad

View source: control/BaseHTMLEditControl.js, line 347

public onSelectionChange()

Fires when the user selects (moves it cursor) to an other element in the DOM tree, an important trigger for updating your user interface.

Inherited From: SUI.control.BaseHTMLEditControl#onSelectionChange

View source: control/BaseHTMLEditControl.js, line 354

public SUI.Padding padding( SUI.Padding p)

Get or set the padding definition of the box.

Parameters:
Name Type Argument Description
SUI.Padding p <optional>
 The new padding definition (or none to use this method as a getter).

Returns:

SUI.Padding The padding definition of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#padding

View source: Box.js, line 490

public SUI.Box parent( SUI.Box p)

Get or set the parent box of the box. When setting the parent the box's element node will be appended to the parent box's HTML element node.

Parameters:
Name Type Description
SUI.Box p The parent box for this box (or none to use this method as a getter).

Returns:

SUI.Box The parent box of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#parent

View source: Box.js, line 510

public string pasteMethod( string p)

Get or set the paste method to use wehn pasting.

Parameters:
Name Type Argument Description
string p <optional>
 The desired method for pasting text: 'text', 'filtered' or 'html' (or none to use this method as a getter).

Returns:

string The current paste method setting (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#pasteMethod

View source: control/BaseHTMLEditControl.js, line 364

public removeBox()

Remove a box from the DOM tree.

Inherited From: SUI.control.BaseHTMLEditControl#removeBox

View source: Box.js, line 523

public removeClass( String cls)

Remove a CSS class name from the class list of the HTML element associated with the box.

Parameters:
Name Type Description
String cls The CSS class name to remove.

Inherited From: SUI.control.BaseHTMLEditControl#removeClass

View source: Box.js, line 532

public resetIframe()

Clear the contents of the control

Inherited From: SUI.control.BaseHTMLEditControl#resetIframe

View source: control/BaseHTMLEditControl.js, line 371

public int right( int r)

Get or set the right of the box.

Parameters:
Name Type Description
int r The new right of the box (or none to use this method as a getter).

Returns:

int The right of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#right

View source: Box.js, line 543

public setCSS( String styleDef, String classNameBody, string[] styleSheets)

Supply CSS data for the edit control. The current CSS style code and linked stylesheets are removed. First the external style sheets are linked in the order they are provided, then the CSS code is appended.

Parameters:
Name Type Description
String styleDef CSS code
String classNameBody A CSS class name for the document body.
string[] styleSheets array of CSS stylesheet links

Inherited From: SUI.control.BaseHTMLEditControl#setCSS

View source: control/BaseHTMLEditControl.js, line 414

public setDim()

Set the CSS dimensions of this box and it's borders and padding. This is typically used in display functions to display boxes at the size and position that was calculated during layout.

Inherited From: SUI.control.BaseHTMLEditControl#setDim

View source: Box.js, line 552

public setEditableElementIds( int[] ids)

TODO

Parameters:
Name Type Description
int[] ids The editable ids

Inherited From: SUI.control.BaseHTMLEditControl#setEditableElementIds

View source: control/BaseHTMLEditControl.js, line 485

public setPos()

Set the CSS postion of this box. This is typically used in display functions to display boxes at position that was calculated during layout. Note: use setDim if you want to set the position and size of the box.

Inherited From: SUI.control.BaseHTMLEditControl#setPos

View source: Box.js, line 600

public setRect( int | SUI.Box t, int l, int w, int h)

Set the top, left, width and height of a box in one go.

Parameters:
Name Type Argument Description
int | SUI.Box t The new top of the box or another reference box to copy the values from.
int l <optional>
 The new left of the box (if the t parameter wasn't a reference Box).
int w <optional>
 The new width of the box (if the t parameter wasn't a reference Box).
int h <optional>
 The new length of the box (if the t parameter wasn't a reference Box).

Inherited From: SUI.control.BaseHTMLEditControl#setRect

View source: Box.js, line 620

public setValue( String val)

Set HTML content for the edit control. Calls the onload handler when the data is fully loaded.

Parameters:
Name Type Description
String val HTML data fragment (no need for a top container)

Inherited From: SUI.control.BaseHTMLEditControl#setValue

View source: control/BaseHTMLEditControl.js, line 494

public int top( int t)

Get or set the top of the box.

Parameters:
Name Type Argument Description
int t <optional>
 The new top of the box (or none to use this method as a getter).

Returns:

int The top of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#top

View source: Box.js, line 641

public int width( int w)

Get or set the width of the box.

Parameters:
Name Type Argument Description
int w <optional>
 The new width of the box (or none to use this method as a getter).

Returns:

int The width of the box (or null if this method was used as a setter).

Inherited From: SUI.control.BaseHTMLEditControl#width

View source: Box.js, line 652