Class EditorField

Object
   |
   +--Field
         |
         +--ComponentField
               |
               +--EditorField

class EditorField

extends ComponentField

Defined in form/editorfield.js

Requires:

- Selection

Field Detail

config

Boolean config

Special editor options

divEmoticons

Object divEmoticons

The div used to show available emoticons

document

Object document

The editable document

iframe

Object iframe

Holds a reference to the iframe used by the component

resizer

Object resizer

Holds resize control variables

selection

Selection selection

Holds an instance of the Selection class. This instance is used to operate over the document selection

switchMode

Object switchMode

The checkbox used to switch between source and WYSIWYG modes

textarea

Object textarea

Textarea element used to show the HTML source code

textMode

Boolean textMode

Indicates if the component is in source mode (true) or WYSIWYG mode (false)

instances

<static> Object instances

Holds existent EditorField instances, indexed by ID.

EditorField

EditorField(<Object> fld, <Boolean> opts)

The EditorField class contain all the logic to enable WYSIWYG HTML editing in an IFRAME element of the page. It controls mouse and keyboard events, execute commands in the HTML contents and also implements all the necessary methods of a field, such as getValue, setValue, disable, enable, ...

Parameters:
fld - Hidden field linked with the HTML editor
opts - Component options

Requires:
- Selection

changeMode

void changeMode(<Boolean> b)

Switch between source and WYSIWYG modes

Parameters:
b - Flag value

cleanHTML

 <private> String cleanHTML(<String> html)

Remove unwanted properties and style definitions from a given HTML code. This method is called from inside EditorField.paste() and is very useful when using MS IE and pasting from MS Word

Parameters:
html - HTML code

clear

void clear()

Clean up the component value

createLink

void createLink()

Create or edit a hyperlink in the component. Uses a simple prompt to read the link address.

execCommand

void execCommand(<String> cmd, <String> val, <Object> ev)

Execute a given command in the editor's document

Parameters:
cmd - Command identifier
val - Command parameter
ev - Event

focus

Boolean focus()

Move focus to the editor component

getBrokenImages

Array getBrokenImages()

Return an array of broken images included in the editor's document

getValue

String getValue()

Return the contents of the editor as HTML

getValueAsText

String getValueAsText()

Return the contents of the editor as text

insertHTML

void insertHTML(<String> html)

Inserts HTML code in the current selection of the component

Parameters:
html - Code to be inserted

insertImage

void insertImage()

Create or edit an image in the component. Uses a simple prompt to read the image address

isEmpty

Boolean isEmpty()

Checks if the component value is empty

keyHandler

Boolean keyHandler(<Object> e)

Handles all keyboard events inside the edit area

Parameters:
e - Event

paste

void paste()

Handles the "paste" event in MSIE browsers

removeNode

void removeNode(<Object> elm)

Remove a given element from the editor's document

Parameters:
elm - Element to remove

resizeHandler

void resizeHandler(<Event> e)

Mouse move handler used by the resize routine

Parameters:
e - Event

resizeTo

void resizeTo(<Number> w, <Number> h)

Resizes the editor area to a given width and a given height. Is called when the resize procedure ends and when a previous saved size is loaded from the cookies

Parameters:
w - Width
h - Height

serialize

String serialize()

Serialize the component so that the value can be used to perform HTTP requests or to build query param strings

setDisabled

void setDisabled(<Boolean> b)

Disables/enables the component

Parameters:
b - Flag value

setResizing

void setResizing(<Event> e, <Boolean> b)

This method is called when resizing of the editor are starts (by clicking in the resize image) and ends (when the mouseup event gets called)

Parameters:
e - Event
b - Start resizing or end resizing

setup

void setup()

Performs all the setup routines of the HTML editor. This method is called after the creation of the instance

setupDocument

void setupDocument()

Initialize the document with the linked field's value and make it editable. This method is called inside EditorField.setup() method

setupEvents

void setupEvents()

Configure all necessary event listeners. Toolbar select inputs, toolbar buttons, switch mode checkbox and document mouse/keyboard events. This method is called inside EditorField.setup() method

setupOptions

void setupOptions()

Define default values to the editor configuration options

setValue

void setValue(<String> html)

Change the value of the component

Parameters:
html - New value

showHideEmoticons

void showHideEmoticons(<Object> ev)

Toggle display status of the emoticons layer

Parameters:
ev - Event