Class: Editor

componyx .UI.Editor(id, properties) → {String}

new Editor(id, properties) → {String}

Editor class. Note: if you use $lib alongside the editor API in an iframe configuration, be aware that editor operations temporarily switch $lib.document to the iframe document. This resets automatically via microtask after each callstack. Call editor.deactivateDocument() explicitly (or reset $lib.document) if you need to restore the context immediately within the same callstack.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: String

Extends

componyx.UI.base.Component

Classes

EditorEvents
StyleItem

Members

PDFExportSettings :Object

Gets or sets the PDF export settings for jsPDF. View https://github.com/parallax/jsPDF

Type:

Object

addMissingFontSize :Boolean

Gets or sets a value indicating if missing font-sizes are added to the font-size menu.

Type:

Boolean

Default Value:

true

allowImageFileSelect :Boolean

Gets or sets a value indicating if a local image file can be selected.

Type:

Boolean

Default Value:

true

allowImageUrlInput :Boolean

Gets or sets a value indicating if an url can be entered for images.

Type:

Boolean

Default Value:

true

bookmarkDialogId :String

Gets or sets the id of the base bookmark-dialog.

Type:

String

buttonTooltipManagerId :String

Gets or sets the id of the base button tooltip manager.

Type:

String

(constant) classOption :Readonly.<Object.<string, string>>

Internal CSS class name constants. You can override any of these classes on the Component instance by defining a property named cssClass<Key> where is the PascalCase key from this object. Example: 'BUILD_PANE' -> 'cssClassBuildPane' Be cautious: overriding these classes without including the default names may break styling and functionality.

Type:

Readonly.<Object.<string, string>>

clearColorButtonId :String

Gets or sets the id of the base clear-color button.

Type:

String

colorPickerId :String

Gets or sets the id of the base color picker.

Type:

String

colorSwatchBoxId :String

Gets or sets the id of the base color swatch box.

Type:

String

colorSwatchColors :Array.<String>

Gets or sets a list of colors displayed in the color-swatch.

Type:

Array.<String>

commands :Object.<string, CommandSettings>

Editor commands.

Type:

Object.<string, CommandSettings>

content :String

Gets or sets the content.

Type:

String

contentManager :componyx.UI.editor_modules.ContentManager

Manages the editor document content, including inserting and sanitizing HTML.

Type:

componyx.UI.editor_modules.ContentManager

defaultAlign :String

Gets or sets the default alignment.

Type:

String

defaultFontFamily :String

Gets or sets the default font family.

Type:

String

defaultFontSize :String

Gets or sets the default font size.

Type:

String

defaultLineHeight :String

Gets or sets the default line-height.

Type:

String

defaultSpellcheck :Boolean

Gets or sets a value indicating if the default Browser spellcheck is enabled.

Type:

Boolean

Default Value:

true

detectFonts :Boolean

Gets or sets a value indicating if CSS imported fonts should be detected.

Type:

Boolean

Default Value:

true

documentTooltipManagerId :String

Gets or sets the id of the base document tooltip manager.

Type:

String

editableElements :Array.<EditableElement>

Gets or sets a list of editable elements.

Type:

Array.<EditableElement>

editorHeight :String

Gets or sets the editor height.

Type:

String

emojiSymbolData :Array.<componyx.UI.Editor.SymbolCategory>

Gets or sets the emoji symbol data.

Type:

Array.<componyx.UI.Editor.SymbolCategory>

emojiSymbolPickerBoxId :String

Gets or sets the id of the base emoji symbol picker box.

Type:

String

emojiSymbolResourcePath :String

Gets or sets the resource path for fetching the emojis.

Type:

String

Default Value:

'src?d=Editor.Emoji.json'

events :componyx.UI.Editor.EditorEvents

Editor events

Type:

componyx.UI.Editor.EditorEvents

excludeFonts :Array.<String>

Gets or sets a list fonts to specifically exclude from the fontFamily menu.

Type:

Array.<String>

extraCommands :Object.<string, CommandSettings>

Gets or sets a list of extra commands to add on initialization. Each object key is the unique command name and the value holds the command settings.

Type:

Object.<string, CommandSettings>

fontSizes :Array.<String>

Gets or sets a list CSS unit font sizes to show in the fontSize menu.

Type:

Array.<String>

fonts :Array.<String>

Gets or sets a list of custom fonts to include in the fontFamily menu.

Type:

Array.<String>

format :componyx.UI.editor_modules.Format

Provides text formatting operations on the current selection range.

Type:

componyx.UI.editor_modules.Format

history :componyx.UI.editor_modules.History

Manages the undo/redo history stack. Call history.addItem() at the end of every custom command that mutates the document, otherwise undo will not work correctly.

Type:

componyx.UI.editor_modules.History

iframe :Boolean

Gets or sets a value indicating uses an iframe (instead of content-editable DIV).

Type:

Boolean

Default Value:

false

imageDialog :Object

Gets or sets identifiers for controls in the image dialog.

Type:

Object

imageDialogId :String

Gets or sets the id of the base image-dialog.

Type:

String

includeStylesheets :Array.<String>

Gets or sets a list stylesheets to include in the iframe. Setting only applicable when iframe is set to true.

Type:

Array.<String>

includeWebSafeFonts :Boolean

Gets or sets a value indicating if default WebSafe fonts are included in the fontFamily menu.

Type:

Boolean

Default Value:

true

indentValue :String

Gets or sets the default indent CSS unit value.

Type:

String

Default Value:

'20px'

labels :componyx.UI.Editor.LabelSettings

Gets or sets the text labels used by the editor.

Type:

componyx.UI.Editor.LabelSettings

layoutState :componyx.UI.editor_modules.LayoutState

Tracks the current layout state of the editor, including the active selection context (link, image, table etc.). Call layoutState.getState() after mutations that affect the active layout to keep the toolbar in sync.

Type:

componyx.UI.editor_modules.LayoutState

lineHeights :Array.<String>

Gets or sets a list of line height options.

Type:

Array.<String>

linkDialog :Object

Gets or sets identifiers for controls in the link dialog.

Type:

Object

linkDialogId :String

Gets or sets the id of the base link-dialog.

Type:

String

localStoragePrefix :String

Gets or sets the prefix used to store data in local storage like color swatch colors.

Type:

String

maxHistoryLength :number|null

Gets or sets the maximum items allowed in the history stack. Null means no limit.

Type:

number | null

mediaDialog :Object

Gets or sets identifiers for controls in the media dialog.

Type:

Object

mediaDialogId :String

Gets or sets the id of the base media-dialog.

Type:

String

mediaURLReplacement :Array.<componyx.UI.Editor.ReplacementItem>

Gets or sets media URL replacement options.

Type:

Array.<componyx.UI.Editor.ReplacementItem>

menuId :String

Gets or sets the id of the base menu.

Type:

String

nodeManager :componyx.UI.editor_modules.NodeManager

Provides utilities for querying and manipulating DOM nodes within the editor document.

Type:

componyx.UI.editor_modules.NodeManager

orderedList :Array.<String>

Gets or sets a list of ordered list-item options.

Type:

Array.<String>

sanitizer :function|null

Gets or sets a custom sanitizer function to sanitize HTML. When set, overrides the built-in sanitizer. The function receives an HTML string and should return a sanitized HTML string. For high-security requirements, consider a dedicated library such as DOMPurify. Client-side sanitization is not a substitute for server-side validation.

Type:

function | null

selectableNodes :Array.<String>

Gets or sets CSS Selectors for nodes that are selectable in the editor. Defaults include anchors, figures and non-editable elements. Additional selectors can be added before render to support custom selectable elements.

Type:

Array.<String>

selectionRange :componyx.UI.editor_modules.SelectionRange

Provides utilities for working with the DOM selection and ranges within the editor document. Use this in custom commands to get, manipulate and restore the selection range.

Type:

componyx.UI.editor_modules.SelectionRange

sourceDialogId :String

Gets or sets the id of the base source-dialog.

Type:

String

sourceViewInDialog :Boolean

Gets or sets a value indicating if the source view is displayed in a dialog.

Type:

Boolean

Default Value:

false

specialSymbolData :Array.<componyx.UI.Editor.SymbolCategory>

Gets or sets the special symbol data.

Type:

Array.<componyx.UI.Editor.SymbolCategory>

specialSymbolPickerBoxId :String

Gets or sets the id of the base special symbol picker box.

Type:

String

specialSymbolResourcePath :String

Gets or sets the resource path for fetching the special characters.

Type:

String

Default Value:

'src?d=Editor.Special.json'

styles :Array.<componyx.UI.Editor.StyleItem>

Gets or sets a list style items to show in the style menu.

Type:

Array.<componyx.UI.Editor.StyleItem>

tableDialog :Object

Gets or sets identifiers for controls in the table dialog.

Type:

Object

tableMenuId :String

Gets or sets the id of the base table menu.

Type:

String

tablePickerBoxId :String

Gets or sets the id of the base table picker box.

Type:

String

toolbarBoxId :String

Gets or sets the id of the base toolbar box.

Type:

String

toolbarDisplay :String

Gets or sets the toolbar display option.

Type:

String

toolbarMoreBoxId :String

Gets or sets the id of the base toolbar-more box.

Type:

String

unorderedList :Array.<String>

Gets or sets a list of unordered list-item options.

Type:

Array.<String>

utility :componyx.UI.editor_modules.Utility

Provides general editor utilities.

Type:

componyx.UI.editor_modules.Utility

validatorId :String

Gets or sets the id of the base validator.

Type:

String

visibleCommands :Array.<String>

Gets or sets a list of unique command names (or special keywords) to show on initialization. By default all supported commands are visible. If set, only these listed commands are visible. core ['undo','redo','bold','italic','underline','strikeThrough','align','indentMin','indentPlus','copyFormat','clearFormat']. list ['orderedList','unorderedList'].
font ['fontSize','fontFamily']. font-color ['fontColor','fontBGColor']

Type:

Array.<String>

(static, readonly) ToolbarDisplayOption :number

ToolbarDisplayOption

Type:

number

Properties:

Name	Type	Description
`HEADER`	number
`FOOTER`	number
`CARET`	number
`getName`	number

Methods

activateDocument()

Activates the current document.

addCommand(name, settings)

Adds a toolbar command.

Parameters:

Name	Type	Description
`name`	String	The unique command name.
`settings`	CommandSettings	The command settings.

addEditableElement(config)

Adds a content editable element

Parameters:

Name	Type	Description
`config`	EditableElement	The settings of the editable element.

align(value)

Sets the text-align value on the nodes in the selection range.

Parameters:

Name	Type	Description
`value`	Number

bold()

Set/unsets bold on the currently selected text range.

bookmark()

Show bookmark dialog.

cleanSource(clearZeroWidthCharacters)

Cleans the HTML source.

Parameters:

Name	Type	Description
`clearZeroWidthCharacters`	boolean

clearFormat()

Clears the formatting on the currently selected text range.

copyFormat() → {Array.<Node>}

Copies the formatting on the currently selected text range.

Returns:

A list of formatting nodes currently active on the selected text range.

Type: Array.<Node>

deactivateDocument()

Deactivates the current document.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

exportToPDF()

Exports the document. Configure settings via PDFExportSettings.

focus(caretAtEndopt)

Sets focus to the editable element.

Parameters:

Name	Type	Attributes	Default	Description
`caretAtEnd`	boolean	<optional>	true	A value indicating to set the caret at the end of the content.

getContent(editableElementopt) → {String}

Gets the editor content.

Parameters:

Name	Type	Attributes	Description
`editableElement`	HTMLElement \| null	<optional>	The specific editable element to get content from. Only applicable if this editor instance uses multiple editable elements.

Returns:

The editor HTML content.

Type: String

getEditorElement() → {String}

Gets the active content-editable editor element (when iframe is set to true this will return the document.body element of the iframe).

Returns:

The editor HTML content.

Type: String

getRange() → {Range}

Gets the active selection range.

Returns:

The active selection range.

Type: Range

getValue(editableElementopt) → {String}

Gets the editor content (equal to getContent()).

Parameters:

Name	Type	Attributes	Description
`editableElement`	HTMLElement \| null	<optional>	The specific editable element to get content from. Only applicable if this editor instance uses multiple editable elements.

Returns:

The editor HTML content.

Type: String

hasEditables() → {boolean}

Gets a value indicating if the editor has editable elements.

Returns:

Type: boolean

indent(value)

Increases/decreases the indent on the current root block element.

Parameters:

Name	Type	Description
`value`	String	A positive or negative CSS value.

initCommands(commands, enableopt)

Initializes the editor with ONLY the specified commands set to enabled (or disabled when the enable parameter is set to false). For other commands, the opposite action is applied. Special keywords can be used to refer to predefined groups of commands:

'*core' : ['undo','redo','bold','italic','underline','strikeThrough','align','indentMin','indentPlus','copyFormat','clearFormat']
'*list' : ['orderedList','unorderedList']
'*font' : ['fontSize','fontFamily']
'*font-color' : ['fontColor','fontBGColor']

Parameters:

Name	Type	Attributes	Default	Description
`commands`	Array.<String>			The unique command names or special keywords to enable/disable.
`enable`	Boolean	<optional>	true	If true, specified commands are enabled; if false, they are disabled.

insert(settings)

Inserts HTML on the currently selected text range.

Parameters:

Name	Type	Description
`settings`	ElementSettings	The element settings.

insertImage()

Show the insert image dialog to create a link for the selection range.

insertLink()

Show the insert link dialog to create a link for the selection range.

insertMedia()

Show the insert media dialog to create a link for the selection range.

italic()

Set/unsets italic on the currently selected text range.

lineHeight(value)

Sets the line-height on the nodes in the selection range.

Parameters:

Name	Type	Description
`value`	Number

pasteFormat(format)

Pastes the formatting on the currently selected text range.

Parameters:

Name	Type	Description
`format`	Array.<Node>	A list of formatting nodes to apply to the selected text range.

postRender()

Executes the post render procedure.

print()

Prints the document.

redo()

Redoes an action.

removeImage()

Removes the active image in the selection range.

removeLink()

Removes the active link in the selection range.

removeMedia()

Removes the active media in the selection range.

render()

Renders the component

save()

Saves the document.

setBlock(tag)

Converts the root block-level nodes in the currently selected text range to the specified block-level tag.

Parameters:

Name	Type	Description
`tag`	String	The block-level element tag.

setContent(content, editableElementopt, sanitize)

Sets the editor content.

Parameters:

Name	Type	Attributes	Description
`content`	String		The HTML content.
`editableElement`	HTMLElement \| null	<optional>	The specific editable element to set content for. Only applicable if this editor instance uses multiple editable elements.
`sanitize`	Boolean		A value indicating if the content should be sanitized.

setImageDialogContentTemplate(content)

Sets the image dialog content template. Available placeholders:

{source} - The source field.
{alt} - The alternative text field.
{width} - The width field.
{height} - The height field.
{caption} - The caption field.
{alignment} - The alignment radio buttons.
{inline} - The inline checkbox (renders in footer).

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setLinkDialogContentTemplate(content)

Sets the link dialog content template. Available placeholders:

{href} - The href field.
{text} - The text field.
{title} - The title field.
{target} - The target field.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setMediaDialogContentTemplate(content)

Sets the media dialog content template. Available placeholders:

{source} - The source field.
{width} - The width field.
{caption} - The caption field.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setTableDialogCellTemplate(content)

Sets the table dialog Cell panel content template. Available placeholders:

{width} - The width field.
{height} - The height field.
{verticalAlign} - The vertical alignment field.
{horizontalAlign}- The horizontal alignment field.
{bgColor} - The background color field.
{borderWidth} - The border width field.
{borderStyle} - The border style field.
{borderColor} - The border color field.
{padding} - The padding field.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setTableDialogRowTemplate(content)

Sets the table dialog Row panel content template. Available placeholders:

{isHeader} - The header row toggle.
{isFooter} - The footer row toggle.
{height} - The height field.
{bgColor} - The background color field.
{borderStyle} - The border style field.
{borderColor} - The border color field.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setTableDialogTableTemplate(content)

Sets the table dialog Table panel content template. Available placeholders:

{width} - The width field.
{alignment} - The alignment field.
{bgColor} - The background color field.
{borderWidth} - The border width field.
{borderStyle} - The border style field.
{borderColor} - The border color field.
{cellSpacing} - The cell spacing field.
{caption} - The caption field.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setToolbarButtonState(enable, exclude)

Sets the state of the toolbar button.

Parameters:

Name	Type	Description
`enable`	boolean	A value that indicates if buttons are enabled or disabled.
`exclude`	Array.<String>	A list of command id's to exclude.

setTooltipMenuTemplate(content)

Sets the menu tooltip template. The template supports the below listed placeholders.

{href} This value will be replaced with link href.
{editButton} This value will be replaced with the edit link/image/media button.
{removeButton} This value will be replaced with the remove link/image/media button.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setValue(content, editableElementopt)

Sets the editor content (equal to setContent()).

Parameters:

Name	Type	Attributes	Description
`content`	String		The HTML content.
`editableElement`	HTMLElement \| null	<optional>	The specific editable element to set content for. Only applicable if this editor instance uses multiple editable elements.

setWordCountTemplate(content)

Sets the word count template. The template supports the below listed placeholders.

{words} This value will be replaced with the word count.
{chars} This value will be replaced with the character count.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

strikeThrough()

Set/unsets strike-through on the currently selected text range.

sub()

Set/unsets sub on the currently selected text range.

sup()

Set/unsets super on the currently selected text range.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

toggleBlockView(on)

Enables/disables the visibility of block level elements in the document.

Parameters:

Name	Type	Description
`on`	Boolean	Use value null to toggle, true to force on, false to force off.

toggleExpandedView(on)

Expand/collapse the editor view to fullscreen.

Parameters:

Name	Type	Description
`on`	Boolean	Use value null to toggle, true to force on, false to force off.

toggleLayoutNode(tag, styles)

Surrounds/unsurrounds the currently selected text range with the specified layout node.

Parameters:

Name	Type	Description
`tag`	String	The layout-node tag.
`styles`	Object.<string, any>	The CSS styles.

togglePreview(on)

Shows/hides the document in preview modus.

Parameters:

Name	Type	Description
`on`	Boolean	Use value null to toggle, true to force on, false to force off.

toggleSourceView(on)

Shows/hides the HTML source viewer.

Parameters:

Name	Type	Description
`on`	Boolean	Use value null to toggle, true to force on, false to force off.

underline()

Set/unsets underline on the currently selected text range.

undo()

Undoes an action.

(static) getNodeFunction(node)

Parameters:

Name	Type	Description
`node`	HTMLElement	The HTML Element node.

(static) isActiveFunction(node, cmd)

Parameters:

Name	Type	Description
`node`	HTMLElement	The HTML Element node.
`cmd`	CommandSettings	The command settings.

Type Definitions

ActiveImageItem

Type:

Object

Properties:

Name	Type	Description
`src`	string	The URL or path of the image.
`alt`	string	The alternative text.
`width`	number	The image width.
`height`	number	The image height.
`caption`	string	The caption text.

ActiveLinkItem

Type:

Object

Properties:

Name	Type	Description
`href`	string	The URL or path of the link.
`text`	string	The link text.
`title`	string	The link title.
`target`	string	The link target.

ActiveMediaItem

Type:

Object

Properties:

Name	Type	Description
`src`	string \| null	The URL or path of the media, or null if embedded.
`embed`	string \| null	The embed HTML, or null if a URL is used.
`width`	string	The media width.
`caption`	string	The caption text.

BaseEventHandler(editor)

Callback for base editor events (stylesheets loaded, undo, redo, selection change).

Parameters:

Name	Type	Description
`editor`	componyx.UI.Editor	The editor instance firing the event.

CSSVariables

Editor CSS Variables.

Type:

Object

Properties:

Name	Type	Attributes	Description
`"--font-color"`	string	<optional>	The font color.
`"--font-bg-color"`	string	<optional>	The font background color.
`"--image-width"`	string	<optional>	The image width.
`"--image-height"`	string	<optional>	The image height.

CommandSettings

Type:

Object.<string, any>

Properties:

Name	Type	Description
`command`	function	Gets or sets the button command.
`shortcutKey`	String	Gets or sets the key used to trigger the command when the CTRL key is held.
`tooltip`	String	Gets or sets the tooltip text to display when the command is in focus.
`cssClassIcon`	String	Gets or sets thecss class name of the button icon.
`show`	Boolean	Gets or sets a value indicating if the command button is shown.
`isActive`	componyx.UI.Editor.IsActiveFunction	Gets or sets the function which should return true if the command button is active (selected).
`getNode`	componyx.UI.Editor.GetNodeFunction	Gets or sets the function which should return the layout node when it is deeper inside the root-node of the active selection range (e.g. FIGURE > IMG).
`buttonId`	String	Gets or sets the id of the base item button.
`type`	componyx.UI.Button.TypeOption	Gets or sets a value indicating the button type. 0: command-button, 1: check-button, 2: radio-button.
`menuId`	String	Gets or sets the id of the menu component.
`menuItemId`	String	Gets or sets the menu-item id.
`group`	Number	Gets or sets the index number of the group to which the command belongs.
`position`	Number	Gets or sets the position of the command within the group. If no positions are specified commands are ordered by insertion order.
`elementSettings`	componyx.UI.Editor.HTMLElementSettings	Gets or sets the settings which configure the element to insert into the document.

ConfirmImageSelectionCallback(url, altopt, captionopt)

Parameters:

Name	Type	Attributes	Description
`url`	String		The URL or path of the selected image.
`alt`	String	<optional>	The alternative text.
`caption`	String	<optional>	The caption text.

ConfirmLinkSelectionCallback(url, linkTextopt, linkTitleopt)

Parameters:

Name	Type	Attributes	Description
`url`	String		The URL or path of the selected image.
`linkText`	String	<optional>	The link text.
`linkTitle`	String	<optional>	The link title.

ConfirmMediaSelectionCallback(url)

Parameters:

Name	Type	Description
`url`	String	The URL or path of the selected media.

CreateSanitizerEventArgs

Type:

Object

Properties:

Name	Type	Description
`sanitizer`	componyx.base_modules.Sanitizer	The created sanitizer class instance.

CreateSanitizerEventHandler(editor, eventArgs)

Callback for sanitizer creation events.

Parameters:

Name	Type	Description
`editor`	componyx.UI.Editor	The editor instance firing the event.
`eventArgs`	componyx.UI.Editor.CreateSanitizerEventArgs	The event details.

EditableElement.

Type:

Object

Properties:

Name	Type	Attributes	Description
`id`	String	<optional>	The identifier of the content editable element.
`element`	HTMLElement	<optional>	The HTML element instead of the identifier.
`settings.toolbarDisplay`	ToolbarDisplayOption	<optional>	The toolbar display for the editable element.

HTMLElementSettings

Type:

Object.<string, any>

Properties:

Name	Type	Description
`node`	Node	Gets or sets the node.
`tag`	String	Gets or sets the tag of the element.
`cssClass`	String	Gets or sets the CSS class of the element.
`styles`	Object.<string, string>	Gets or sets the CSS styles of the element.
`attributes`	Object.<string, string>	Gets or sets the attributes of the element.
`textContent`	String	Gets or sets the text content of the element.
`innerHTML`	String	Gets or sets the inner HTML of the element (overwrites textContent).
`outerHTML`	String	Gets or sets the outer HTML of the element. When a value is provided the tag, cssClass, styles, attributes, textContent and innerHTML properties are ignored.
`isPhrasingContent`	Boolean	Gets or sets a value indicating if the element is phrasing content and can be placed inside a P tag.
`selectable`	Boolean	Gets or sets a value indicating if the element is selectable. For selectability on document reload, ensure the element matches a selector in selectableNodes so the node will remain selectable.
`select`	Boolean	Gets or sets a value indicating if the element is selected when inserted.
`allowContent`	Boolean	Gets or sets a value indicating if the element allows editable content.

ImageDialogShowEventArgs

Type:

Object

Properties:

Name	Type	Description
`container`	HTMLElement	The dialog content container element.
`activeItem`	componyx.UI.Editor.ActiveImageItem \| null	The currently active image in the editor, or null if no image is selected.
`confirmSelection`	componyx.UI.Editor.ConfirmImageSelectionCallback	A function to confirm the selected image and insert it into the document.

ImageDialogShowEventHandler(editor, eventArgs)

Parameters:

Name	Type	Description
`editor`	componyx.UI.Editor	The editor instance firing the event.
`eventArgs`	componyx.UI.Editor.ImageDialogShowEventArgs	The event details.

ImageEventArgs

Type:

Object

Properties:

Name	Type	Attributes	Description
`imageElement`	HTMLImageElement		The image element involved.
`file`	File \| null	<optional>	The image file if available, otherwise null.

ImageEventHandler(editor, eventArgs)

Callback for image-related events.

Parameters:

Name	Type	Description
`editor`	componyx.UI.Editor	The editor instance firing the event.
`eventArgs`	componyx.UI.Editor.ImageEventArgs	The event details.

LabelSettings

Type:

Object.<string, string>

Properties:

Name	Type	Description
`comboBoxPlaceholderEditable`	String	= - Select or Type - - Gets or sets the default placeholder for a combobox that allows input.
`comboBoxPlaceholderReadOnly`	String	= - Select - - Gets or sets the default placeholder for a combobox that is read-only.
`alignLeft`	String	= Left - Gets or sets the label for left alignment.
`alignCenter`	String	= Center - Gets or sets the label for center alignment.
`alignRight`	String	= Right - Gets or sets the label for right alignment.
`alignJustify`	String	= Justify - Gets or sets the label for justified text alignment.
`alignTop`	String	= Top - Gets or sets the label for vertical top alignment.
`alignMiddle`	String	= Middle - Gets or sets the label for vertical middle alignment.
`alignBottom`	String	= Center - Gets or sets the label for vertical bottom alignment.
`borderStyleNone`	String	= None - Gets or sets the label for border-style none.
`borderStyleSolid`	String	= Solid - Gets or sets the label for border-style solid.
`borderStyleDashed`	String	= Dashed - Gets or sets the label for border-style dashed.
`borderStyleDotted`	String	= Dotted - Gets or sets the label for border-style dotted.
`borderStyleDouble`	String	= Double - Gets or sets the label for border-style double.
`dialogConfirm`	String	= OK - Gets or sets the label for the confirm button in dialogs.
`dialogCancel`	String	= Cancel - Gets or sets the label for the cancel button in dialogs.
`sourceViewDialogHeader`	String	= Source View - Gets or sets the header label for the Source View dialog.
`sourceViewRootItem`	String	= document - Gets or sets the label for the root item in Source View.
`bookmarkDialogHeader`	String	= Insert/Edit Bookmark - Gets or sets the header label for the Insert/Edit Bookmark dialog.
`bookmarkInputPlaceholder`	String	= Bookmark name - Gets or sets the placeholder text for the bookmark name input.
`bookmarkPrefix`	String	= Bookmark - Gets or sets the prefix text for bookmarks.
`symbolSearchInputPlaceholder`	String	= Search - Gets or sets the placeholder text for the symbol search input.
`linkDialogHeader`	String	= Insert/Edit Link - Gets or sets the header label for the Insert/Edit Link dialog.
`linkHref`	String	= URL - Gets or sets the label for the URL field in the Link dialog.
`linkText`	String	= Text - Gets or sets the label for the text field in the Link dialog.
`linkTitle`	String	= Title - Gets or sets the label for the Title field in the Link dialog.
`linkTarget`	String	= Target - Gets or sets the label for the Target field in the Link dialog.
`linkTargetCurrent`	String	= Current window - Gets or sets the label for opening the link in the current window.
`linkTargetNew`	String	= New window - Gets or sets the label for opening the link in a new window.
`linkDownloadable`	String	= Downloadable - Gets or sets the label indicating a downloadable link.
`removeLink`	String	= Remove link - Gets or sets the label for removing a link.
`imageDialogHeader`	String	= Insert/Edit Image - Gets or sets the header label for the Insert/Edit Image dialog.
`imageSource`	String	= Image URL/File - Gets or sets the label for the image URL or file input.
`imageAlt`	String	= Alternative text - Gets or sets the label for the alternative text of an image.
`imageWidth`	String	= Width - Gets or sets the label for the width of an image.
`imageHeight`	String	= Height - Gets or sets the label for the height of an image.
`imageAlignment`	String	= Alignment - Gets or sets the label for image alignment.
`imageInline`	String	= Inline image - Gets or sets the label for inline images.
`imageFileButtonTooltip`	String	= Upload file from computer - Gets or sets the tooltip text for the image upload button.
`imageConstrainButtonTooltip`	String	= Lock/Unlock image proportions - Gets or sets the tooltip text for the image constrain proportions button.
`mediaDialogHeader`	String	= Insert/Edit Media - Gets or sets the header label for the Insert/Edit Media dialog.
`mediaSource`	String	= Media URL - Gets or sets the label for the media URL input.
`mediaEmbed`	String	= Media Embed - Gets or sets the label for the media embed input.
`mediaWidth`	String	= Width - Gets or sets the label for the width of media elements.
`comboBoxNoResult`	String	= - Gets or sets the label shown when no results are found in combo boxes.
`default`	String	= - Default - - Gets or sets the label for the default option.
`emojiSymbolCategories`	Array.<String>	= ['All'] - Gets or sets the list of emoji symbol categories.
`specialSymbolCategories`	Array.<String>	= ['All'] - Gets or sets the list of special symbol categories.
`tableDialogHeader`	String	= Table Settings - Gets or sets the header label for the Table Settings dialog.
`tableDialogCategoryTable`	String	= Table - Gets or sets the label for the Table category in the Table Settings dialog.
`tableDialogCategoryRow`	String	= Row - Gets or sets the label for the Row category in the Table Settings dialog.
`tableDialogCategoryCell`	String	= Cell - Gets or sets the label for the Cell category in the Table Settings dialog.
`tableWidth`	String	= Width - Gets or sets the label for the table width field.
`tableAlignment`	String	= Alignment - Gets or sets the label for the table alignment field.
`tableCellSpacing`	String	= Cell Spacing - Gets or sets the label for the table cell spacing field.
`tableCellPadding`	String	= Cell Padding - Gets or sets the label for the table cell padding field.
`headerRow`	String	= Header Row - Gets or sets the label for the row header toggle.
`footerRow`	String	= Footer Row - Gets or sets the label for the row footer toggle.
`rowHeight`	String	= Height - Gets or sets the label for the row height.
`cellWidth`	String	= Width - Gets or sets the label for the cell width field.
`cellHeight`	String	= Height - Gets or sets the label for the cell height field.
`cellPadding`	String	= Padding - Gets or sets the label for the cell padding field.
`caption`	String	= Caption - Gets or sets the label for caption fields (table, image, media).
`bgColor`	String	= Background Color - Gets or sets the label for background color fields (row, cell).
`borderWidth`	String	= Border Width - Gets or sets the label for border width fields (table, cell).
`borderStyle`	String	= Border Style - Gets or sets the label for border style fields (table, cell).
`borderColor`	String	= Border Color - Gets or sets the label for border color fields (table, cell).
`verticalAlign`	String	= Vertical Align - Gets or sets the label for the vertical alignment field.
`horizontalAlign`	String	= Horizontal Align - Gets or sets the label for the horizontal alignment field.
`tableMenuCut`	String	= Cut - Gets or sets the label for cutting selected table content.
`tableMenuCopy`	String	= Copy - Gets or sets the label for copying selected table content.
`tableMenuPaste`	String	= Paste - Gets or sets the label for pasting clipboard content into the table.
`tableMenuPastePlainText`	String	= Paste as plain text - Gets or sets the label for pasting clipboard content without formatting.
`tableMenuRow`	String	= Row - Gets or sets the label for the row submenu.
`tableMenuAddRowAbove`	String	= Add Row above - Gets or sets the label for inserting a row above the current row.
`tableMenuAddRowBelow`	String	= Add Row below - Gets or sets the label for inserting a row below the current row.
`tableMenuRemoveRow`	String	= Remove Row - Gets or sets the label for removing the selected row.
`tableMenuColumn`	String	= Column - Gets or sets the label for the column submenu.
`tableMenuAddColumnLeft`	String	= Add Column left - Gets or sets the label for inserting a column to the left.
`tableMenuAddColumnRight`	String	= Add Column right - Gets or sets the label for inserting a column to the right.
`tableMenuRemoveColumn`	String	= Remove Column - Gets or sets the label for removing the selected column.
`tableMenuMerge`	String	= Merge - Gets or sets the label for the merge submenu.
`tableMenuMergeSelection`	String	= Merge Selection - Gets or sets the label for merging selected cells into one cell.
`tableMenuMergeRight`	String	= Merge Right - Gets or sets the label for merging the current cell with the cell to the right.
`tableMenuMergeDown`	String	= Merge Down - Gets or sets the label for merging the current cell with the cell below.
`tableMenuSplit`	String	= Split Cells - Gets or sets the label for splitting a merged cell into individual cells.
`tableMenuSettings`	String	= Settings - Gets or sets the label for opening the table settings dialog.
`tableMenuDelete`	String	= Delete Table - Gets or sets the label for deleting the entire table.
`undoCommandTooltip`	String	Gets or sets the tooltip text for the Undo command button.
`redoCommandTooltip`	String	Gets or sets the tooltip text for the Redo command button.
`boldCommandTooltip`	String	Gets or sets the tooltip text for the Bold command button.
`italicCommandTooltip`	String	Gets or sets the tooltip text for the Italic command button.
`underlineCommandTooltip`	String	Gets or sets the tooltip text for the Underline command button.
`strikeThroughCommandTooltip`	String	Gets or sets the tooltip text for the StrikeThrough command button.
`fontColorCommandTooltip`	String	Gets or sets the tooltip text for the Font Color command button.
`fontBGColorCommandTooltip`	String	Gets or sets the tooltip text for the Background Color command button.
`blockCommandTooltip`	String	Gets or sets the tooltip text for the Block style command button.
`fontFamilyCommandTooltip`	String	Gets or sets the tooltip text for the Font Family command button.
`fontSizeCommandTooltip`	String	Gets or sets the tooltip text for the Font Size command button.
`styleCommandTooltip`	String	Gets or sets the tooltip text for the Style command button.
`alignCommandTooltip`	String	Gets or sets the tooltip text for the Align command button.
`lineHeightCommandTooltip`	String	Gets or sets the tooltip text for the Line Height command button.
`indentMinCommandTooltip`	String	Gets or sets the tooltip text for the Decrease Indent command button.
`indentPlusCommandTooltip`	String	Gets or sets the tooltip text for the Increase Indent command button.
`orderedListCommandTooltip`	String	Gets or sets the tooltip text for the Ordered List command button.
`unorderedListCommandTooltip`	String	Gets or sets the tooltip text for the Unordered List command button.
`checkListCommandTooltip`	String	Gets or sets the tooltip text for the Check List command button.
`linkCommandTooltip`	String	Gets or sets the tooltip text for the Link command button.
`imageCommandTooltip`	String	Gets or sets the tooltip text for the Image command button.
`mediaCommandTooltip`	String	Gets or sets the tooltip text for the Media command button.
`tableCommandTooltip`	String	Gets or sets the tooltip text for the Table command button.
`subscriptCommandTooltip`	String	Gets or sets the tooltip text for the Subscript command button.
`superscriptCommandTooltip`	String	Gets or sets the tooltip text for the Superscript command button.
`copyFormatCommandTooltip`	String	Gets or sets the tooltip text for the Copy Format command button.
`clearFormatCommandTooltip`	String	Gets or sets the tooltip text for the Clear Format command button.
`bookmarkCommandTooltip`	String	Gets or sets the tooltip text for the Bookmark command button.
`horizontalLineCommandTooltip`	String	Gets or sets the tooltip text for the Horizontal Line command button.
`pageBreakCommandTooltip`	String	Gets or sets the tooltip text for the Page Break command button.
`sourceCommandTooltip`	String	Gets or sets the tooltip text for the Source View command button.
`expandCommandTooltip`	String	Gets or sets the tooltip text for the Expand View command button.
`previewCommandTooltip`	String	Gets or sets the tooltip text for the Preview command button.
`saveCommandTooltip`	String	Gets or sets the tooltip text for the Save command button.
`exportCommandTooltip`	String	Gets or sets the tooltip text for the Export to PDF command button.
`printCommandTooltip`	String	Gets or sets the tooltip text for the Print command button.
`moreCommandTooltip`	String	Gets or sets the tooltip text for the More options command button.
`blockViewCommandTooltip`	String	Gets or sets the tooltip text for the Block View command button.
`specialCommandTooltip`	String	Gets or sets the tooltip text for the Special Symbols command button.
`emojiCommandTooltip`	String	Gets or sets the tooltip text for the Emoji Symbols command button.

LinkDialogShowEventArgs

Type:

Object

Properties:

Name	Type	Description
`container`	HTMLElement	The dialog content container element.
`activeItem`	componyx.UI.Editor.ActiveLinkItem \| null	The currently active link in the editor, or null if no link is selected.
`confirmSelection`	componyx.UI.Editor.ConfirmLinkSelectionCallback	A function to confirm the selected link and insert it into the document.

LinkDialogShowEventHandler(editor, eventArgs)

Parameters:

Name	Type	Description
`editor`	componyx.UI.Editor	The editor instance firing the event.
`eventArgs`	componyx.UI.Editor.LinkDialogShowEventArgs	The event details.

MediaDialogShowEventArgs

Type:

Object

Properties:

Name	Type	Description
`container`	HTMLElement	The dialog content container element.
`activeItem`	componyx.UI.Editor.ActiveMediaItem \| null	The currently active media in the editor, or null if no media is selected.
`confirmSelection`	componyx.UI.Editor.ConfirmMediaSelectionCallback	A function to confirm the selected media and insert it into the document.