Class: DocumentEditor

Constructor

new DocumentEditor(contentopt)

DocumentEditor constructor. Check usage examples below

Parameters:

Name	Type	Attributes	Description
`content`	string	<optional>	Initial content.

Example

let content = "<html><body><h1>This is a header</h1><p>This is a new paragraph</p></body></html>";
const editor1 = new DocumentEditor(content).html(true); // creates editor and sets content in constructor
const editor2 = new DocumentEditor().html(true).text(content); // creates editor and then sets content

Classes

DocumentEditor

Methods

addCSS(css) → {DocumentEditor}

Adds CSS styles to be applied to the HTML document without adding this CSS to the HTML content. This method should be used only when DocumentEditor's HTML content type is enabled using html(true) method. Added CSS cannot be removed separately. To remove all added CSS use setCSS("") method.

Parameters:

Name	Type	Description
`css`	string	CSS content (without `style` tags).

Returns:

Type:: DocumentEditor

excludedTags(tagsopt) → {DocumentEditor|string}

Sets/gets a comma separated list of HTML tags to be excluded (stripped away) from HTML document (when content type is set to HTML using html(true).

Parameters:

Name	Type	Attributes	Description
`tags`	string	<optional>	A list of tags separated by comma. e.g. editor.excludedTags("hr audio video div");

Returns:

Type:: DocumentEditor | string

html(valueopt) → {DocumentEditor|boolean}

Sets or gets boolean value stating if content type of the document is HTML or not. True means HTML, false means plain text.

Parameters:

Name	Type	Attributes	Description
`value`	boolean	<optional>	`true` to enable HTML content type, `false` to switch to plain text.

Returns:

If argument is passed, this component instance is returned, otherwise boolean is returned.

Type:: DocumentEditor | boolean

lineWrapping(valueopt) → {LineWrap|DocumentEditor}

Enables/Disables Word/Character line wrapping of long lines instead of scrolling horizontally.

Parameters:

Name	Type	Attributes	Description
`value`	LineWrap	<optional>	LineWrap.Word, LineWrap.Character, or LineWrap.None

See: LineWrap

Returns:

If argument is passed, this component instance is returned, otherwise line wrap value is returned.

Type:: LineWrap | DocumentEditor

linksEnabled(enabledopt) → {DocumentEditor|boolean}

Sets or gets the ability to click on HTML document's hypertext links made with a tag to open the link in a web browser. When enabled, user can click on a hyperlink to open the link's URL in a default web browser. For that HTML content type must be enabled with html(true) method and editing should be disabled with editable(false) method.

Parameters:

Name	Type	Attributes	Description
`enabled`	boolean	<optional>	`true` to enable, `false` to disable.

Returns:

If argument is omitted, boolean is returned, otherwise this DocumentEditor instance is returned.

Type:: DocumentEditor | boolean

onLinkEvents(callbackopt, removeopt) → {Array.<function()>|ComboBox}

Registers, unregisters, and gets an Array of event handlers for the event when user clicks on a hyperlink. It gives the ability to create a custom action for hyperlink clicks. Check for event Object format in example below.

Parameters:

Name	Type	Attributes	Description
`callback`	function	<optional>	Handler function receiving LinkEvent object. Pass `null` to unregister all handler callbacks.
`remove`	boolean	<optional>	Set to `true` to unregister the handler function.

See: LinkEvent

Returns:

Returns an array of registered handler functions if arguments are omitted, otherwise returns this component instance.

Type:: Array.<function()> | ComboBox

Example

// LinkEvent format example
LinkEvent {
    target: DocumentEditor, // This component
    type: string,           // `click`, `mouseenter`, or `mouseleave`
    url: string,            // The href="" attribute of the `a` tag
    text: string,           // Text of the hyperlink
    shift: boolean,         // Indicates if Shift key was pressed when the event occurred
    ctrl: boolean,          // Indicates if Ctrl key was pressed when the event occurred
    alt: boolean,           // Indicates if Alt key was pressed when the event occurred
    modifiers: string       // Keyboard modifiers mask
    modifiersText: string   // Text representation of keyboard modifiers
}

setCSS(css) → {DocumentEditor}

Sets new CSS styles to be applied to the HTML document without adding this CSS to the HTML content. It replaces previously added CSS. This method can be used to remove previously added CSS by calling setCSS(""). This method should be used only when DocumentEditor's HTML content type is enabled using html(true) method.

Parameters:

Name	Type	Description
`css`	string	CSS content (without `style` tags).

Returns:

Type:: DocumentEditor

text(textopt, actionopt, insert_positionopt) → {string|this}

Sets or gets text or HTML content of the component (depending if HTML is enabled using html(boolean) method.

Parameters:

Name	Type	Attributes	Description
`text`	string	<optional>	Can be plain text or HTML. HTML should be surrounded with HTML tags. Check example below.
`action`	TextAction	<optional>	Specific action to perform with text. Replace, append, prepend, or insert. Do not use this argument for HTML content.
`insert_position`	number	<optional>	Position where to insert text. Applies only if `action` argument is TextAction.Insert.

Returns:

Returns text or HTML if no argument is set, otherwise returns this component.

Type:: string | this

Example

const txt = textfield.text(); // gets text value
textfield.text("New Text"); // sets new text value
textfield.html(true).text("<html>New Text Line 1<br />New Text Line 2</html>"); // changes editor's content type to HTML and sets HTML content
textfield.text("Appended Text", TextAction.Append); // Appends new text to the end of current text
textfield.text("Inserted Text", TextAction.Insert); // Inserts at current caret position
textfield.text("Inserted Text", TextAction.Insert, textfield.caretPosition() - 50); // Inserts at specified position