Editor — Smart UI JavaScript API

Editor — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Editor - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-editor id="demo-editor"></smart-editor>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.editor.js';

    const el = document.getElementById('demo-editor');
    if (el) {

      el.editMode = 'html';
      el.toolbarViewMode = 'toggle';
      el.showCharCount = true;
      el.maxCharCount = 500;
      el.value = '
Editor demo
Edit rich text, apply formatting, and export content.
';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Editor   Framework: JavaScript   Selector: smart-editor

API counts: 56 properties, 31 methods, 28 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addToolbarItem(), blur(), clearContent(), collapseToolbar(), disableToolbarItem(), expandToolbar()

Common events: change, changing, actionStart, actionEnd, contextMenuItemClick, contextMenuOpen

Module hint: smart-webcomponents/source/modules/smart.editor.js

smartEditor represents an advanced HTML text editor which can simplify web content creation or be a replacement of your HTML/Markdown Text Areas.

Class

Editor

Editor

smartEditor represents an advanced HTML text editor which can simplify web content creation or be a replacement of your HTML/Markdown Text Areas.

Selector

smart-editor

Quick picks

changedisabledfocusvalue

Properties

AaiAn object that defines configuration settings for integrating AI capabilities within the grid, including options for enabling AI features, specifying AI service endpoints, adjusting model parameters, and customizing AI-driven functionality in the grid interface. Click for more details. Property object's options:
  • model:string - The AI model used for text generation or other AI-powered features.
  • maxTokens:number - The maximum number of tokens (words/characters) the AI can generate in a single request
  • temperature:number - Controls the randomness of AI output. Lower values produce more focused results; higher values are more creative.
  • url:string - The endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.
  • key:string - The API key used to authenticate requests to the AI provider.
AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the selected mode.
AautoFormattingAutomatically formats your text in real-time as you type, converting your input into structured elements such as bullet points, checkboxes, headings, and code blocks. This feature streamlines note-taking and writing by instantly applying consistent formatting without requiring manual markup or additional steps.
AautoLoadAutomatically restores the editor's most recently saved state from the browser's local storage when the element is initialized. To retrieve the correct saved state, you must specify a unique id that matches the one used during the saving process. Without this id, the editor cannot identify or load the previously stored state.
AautoSaveAutomatically saves the editor's current content at regular intervals specified by the autoSaveInterval property, but only while the editor element is focused. To enable automatic saving, you must assign a unique id to the editor element; this id is used to store and retrieve the editor's saved state.
AautoSaveIntervalSpecifies the time interval, in milliseconds, at which the Editor automatically saves its state when the autoSave property is enabled. This property controls how frequently the Editor performs auto-save operations.
AautoUploadControls whether files are automatically uploaded immediately after the user selects them. When enabled, the upload process begins as soon as files are chosen. When disabled, file upload must be triggered manually. This property can be used to either retrieve the current auto-upload setting or update it.
CcharCountFormatFunctionA customizable formatting function for the character counter display in the Editor. This function receives two parameters:- chars: The current number of characters entered by the user in the Editor.- maxCharCount: The maximum allowed number of characters for the Editor input.The function should return a formatted string that represents the character count status, which will be shown in the Editor’s UI (for example, "25 / 100 characters"). This allows developers to define custom formats for how the character count is displayed to users.
Ccontent_cssDefines the CSS file(s) or styles to be applied to the content area within the Editor, allowing you to customize the appearance and formatting of the editor’s content.
CcontentFilteringSpecifies the configuration for content filtering, allowing you to define which types of content are allowed or blocked according to the selected criteria or rules. Click for more details. Property object's options:
  • attributes:string[] - Determines which element attributes to filter.
  • attributeFilterMode:string - Determines whether to allow (whiteList) or remove (blackList) the specified attributes.
  • tags:string[] - Determines which element tags to filter.
  • tagFilterMode:string - Determines whether to allow (whiteList) or remove (blackList) the specified tags.
  • styleAttributes:string[] - Determines which style attributes to filter.
  • styleAttributeFilterMode:string - Determines whether to allow (whiteList) or remove (blackList) the specified style attributes.
CcontextMenuSpecifies the items and structure of the context menu that appears when a user right-clicks within the Editor's content area. This setting allows you to customize which menu options are available based on the user's actions, providing tailored functionality and quick access to relevant commands.
CcontextMenuDataSourceEnhances the Editor’s context menu by allowing you to customize its default items. This property accepts several formats:- 'Array of Items:' You can provide an array where each item is either: - A 'string' representing the value/action for the menu item. - An 'object' in the format '{ label: string, value: string }', where: - 'label' is the text displayed in the menu. - 'value' is the action or identifier associated with that menu item.- 'Function:' You can also pass a function that dynamically generates the array of menu items. The function receives the following parameters: - 'target' ('HTMLElement'): The DOM element where the context menu is triggered. - 'type' ('string'): The type or context of the menu (e.g., "table", "image", "link", or other relevant context types). - 'defaultItems' ('string[]'): The default set of menu item identifiers for that context. The function should return an array of menu items (as described above), which will be rendered in place of the default menu.'Example function signature:''''javascriptfunction (target: HTMLElement, type: string, defaultItems: string[]) { return defaultItems;}'''This flexible property enables you to tailor the context menu based on the user's selection, the specific element targeted, or the context of the interaction, helping create a more intuitive and relevant editing experience.
DdataExportConfigures the available options for exporting data from the Editor, such as file formats (CSV, JSON, XML), export settings, and customization preferences. These settings determine how users can save or export content from the Editor. Click for more details. Property object's options:
  • style:object - Sets a custom style object of the dataExport.
  • fileName:string - Sets the exported file's name.
  • pageOrientation:string - Sets the page orientation, when exporting to PDF.
DdisabledControls whether the Editor component is active or inactive. When enabled, users can interact with and make changes within the Editor; when disabled, all editing functionalities are restricted or unavailable.
DdisableEditingPrevents users from modifying or editing content within the Editor, making all content read-only.
DdisableSearchBarPrevents the Quick Search Bar from appearing or being accessible to users, effectively disabling its functionality across the application.
EeditModeSpecifies the editing mode for the Editor component. By default, the Editor operates in standard HTML mode, allowing users to input and edit HTML content directly. In this mode, pressing Enter inserts line breaks or new paragraphs according to standard HTML behavior. When set to 'blockHtml', the Editor creates new DIV elements each time the user presses Enter, promoting a block-based editing experience. This mode also provides built-in commands tailored for structured data entry and manipulation.If set to 'markdown', the Editor functions as a dedicated Markdown editor. User input is interpreted as Markdown syntax, and the Editor automatically parses and converts the Markdown content into HTML for real-time preview. This enables a seamless writing and formatting workflow for users who prefer Markdown.Possible values:- 'html' (default): Accepts and parses HTML input.- 'blockHtml': Uses DIV tags for new blocks and offers additional commands for data input.- 'markdown': Enables Markdown syntax input with live HTML preview.
EenableHtmlEncodeSpecifies whether the output from the getHTML method and the Source Code view should be HTML-encoded. When enabled, special characters in the code (such as <, >, and &) are converted to their HTML entity equivalents, ensuring correct display and preventing unintended HTML rendering. When disabled, the values are returned as raw HTML without encoding.
EenablePagesActivates the editor pages functionality, allowing users to create, edit, and manage custom pages directly within the editor interface.
EenableTabKeySpecifies whether pressing the Tab key inside the Editor will insert a tab character at the cursor position, or instead move focus to the next focusable element (default behavior). When enabled, Tab inserts a tab character; when disabled, Tab shifts focus as usual.
FfindAndReplaceTimeoutSpecifies the duration (in milliseconds) between consecutive result updates when using the "Find and Replace" and "Search Bar" features. Adjusting this interval can affect how quickly search results are refreshed and displayed to the user during searches.
HhideInlineToolbarSpecifies whether the Inline Toolbar is visible. If set to true, the toolbar will be hidden; if false, the toolbar will be displayed.
HhideToolbarSpecifies whether the Toolbar is visible or hidden. When set to true, the Toolbar will be hidden; when set to false, the Toolbar will be displayed.
IiframeSettingsSpecifies the iframe configuration for the Editor. When enabled, the Editor's content is rendered within an isolated iframe, ensuring separation from the main DOM and preventing style or script conflicts. This option enhances content security and encapsulation. Additionally, it provides a mechanism to inject external resources (such as stylesheets or scripts) directly into the iframe environment if required. Click for more details. Property object's options:
  • attributes:object - Determines the attributes and their values that will be set to the iframe. Here's how to define attributes: 
    attributes: { height: 500 }
  • enabled:boolean - Enables/Disables the usage of an iframe for the content of the Editor.
  • resources:string - Determines the resources like scripts/styles that will be imported into the iframe. Here's how to define resources: 
    resources: { 'style': { href: 'styles.css' }, 'script': { src: 'index.js', type: 'module' }}
IimageFormatSpecifies the file format for images or videos uploaded from local storage. By default, uploaded files are encoded and stored as base64 strings. This setting allows you to define or change the storage format as needed.
IimagePasteHeightAutomatically detects and sets the appropriate height for an image when it is pasted from the clipboard, ensuring correct aspect ratio and consistent display within the application.
IimagePasteWidthAutomatically detects and sets the appropriate width for images pasted from the clipboard, ensuring consistent image display and optimal fit within the layout.
IinlineToolbarOffsetSpecifies the horizontal (x) and vertical (y) offset values used to adjust the position of the Inline Toolbar relative to its default placement on the page. This allows for precise positioning by shifting the toolbar along the x and y axes.
IinnerHTMLSets the content of the Editor using an HTML string. This method enables you to programmatically insert both plain text and HTML elements, including tags, formatting, and embedded media, directly into the Editor. Existing content will be replaced by the provided HTML. Use this to dynamically update the Editor's contents with custom HTML markup.
LlocaleSpecifies the current language code used for localization, such as "en" for English or "fr" for French. This property works together with the messages property to display the appropriate localized messages based on the selected language. Use it to get or set the active language for your application's interface.
MmaxCharCountSpecifies the maximum number of characters that can be entered within the Editor. Once this limit is reached, users will be unable to input additional characters.
MmessagesDefines or retrieves an object containing all user-visible strings (such as labels, tooltips, and messages) used by the widget for display purposes and localization. This property works together with the language setting to enable customization and translation of the widget’s interface into different languages. The object allows developers to provide localized string values, ensuring the widget content is appropriately translated for end users.
NnameAssigns the specified element to the property †a†, designating it as the form control responsible for submitting the Editor's value. This allows the Editor’s content to be included in form submissions, ensuring its data is sent when the form is submitted.
PpagesDefines the editor pages by accepting an array of objects, where each object must include a 'label' property (a string representing the title or name of the page) and an 'innerHTML' property (a string containing the HTML content to be displayed on that page).
PpasteFormatSpecifies the format (such as plain text, HTML, or Markdown) in which content will be inserted into the Editor when a user pastes data, ensuring consistent formatting and correct rendering within the editing environment.
PplaceholderSpecifies the placeholder text or element displayed within the Editor when it is empty, guiding users on what to enter or indicating the expected content.
RremoveStylesOnClearFormatSpecifies whether activating the clearFormat toolbar action should also remove any inline CSS styles (such as style attributes) applied to the currently selected node. When enabled, this option ensures that in addition to removing formatting tags (like <b>, <i>, etc.), all custom inline styles will be cleared from the selected content.
RremoveUrlDefines or retrieves the URL used for the remove operation. This property corresponds to the form's action attribute and specifies the server endpoint that will handle item removal requests. For example, setting the removeUrl property to the path of a PHP file enables the server-side script to process and execute the removal action when triggered.
RrequiredSpecifies whether the Editor's content is required. If this option is enabled and the Editor is left empty, a notification will be displayed indicating that the content cannot be empty and must be provided before proceeding.
RrightToLeftSets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures that the element displays its content in a manner appropriate for RTL locale support.
SsanitizedIndicates whether the value is sanitized to protect against Cross-Site Scripting (XSS) attacks. When enabled, any potentially malicious scripts, inline event handlers, or other XSS vulnerabilities are automatically removed from the HTML content entered in the Editor, ensuring only safe and clean HTML is allowed.
SshowCharCountControls the visibility of the character counter. When enabled, the counter appears in the bottom right corner of the input field. If a maxCharCount value is set, the counter changes color to visually warn the user as they approach the character limit:- When the content length reaches 70% or more of the maximum, the counter displays a warning color.- At 90% or more of the maximum, the counter switches to a more prominent warning color, indicating that the limit is nearly reached.- Once the character count reaches the maximum limit, further text input is prevented.
SspellCheckSpecifies if the editor enables spell checking, allowing the identification and highlighting of spelling errors within the text. If set to true, the editor will actively check and mark misspelled words as the user types. If set to false, spell checking functionality will be disabled.
SsplitModeRefreshTimeoutSpecifies the time interval, in milliseconds, at which the Source Code and Preview panels are automatically refreshed when Split Mode is active. Adjusting this value controls how frequently the panels update to reflect changes in real-time while Split Mode is enabled.
TthemeSpecifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.
TtoolbarItems'Provides the configuration for the Toolbar items in the editor.' The value can be either an array of strings—where each string specifies the name of a default toolbar item—or an array of objects for more advanced configuration and customization. - 'String Values:' Each string refers to a toolbar item by its name. Names are case-insensitive.- 'Object Values:' An object can define a custom toolbar item, or modify/add settings to an existing one. - The object must include a 'name' property (case-insensitive) to refer to a default toolbar item’s functionality. - If 'name' is set to "custom", you can define a fully custom toolbar item. - If the 'name' attribute is missing or invalid, the entry is treated as a separator rather than a toolbar item.'Supported Default Toolbar Items' Below is a list of default toolbar items supported by the editor, along with their descriptions and types: - 'SourceCode': Toggles between the HTML source/preview panel and the input panel. *Type: Toggle button*- 'SplitMode': Splits the editor view to show both input and preview panels. *Type: Toggle button*- 'FullScreen': Expands the editor to fill the viewport, overlaying the page content. *Type: Toggle button*- 'Alignment': Controls the alignment (left, center, right, justify) of the selected content. *Type: Dropdown*- 'FontName': Sets the font family of the selected content. *Type: Dropdown*- 'FontSize': Sets the font size of the selected content. *Type: Dropdown*- 'Formats': Changes the format/style of the current selection (e.g., paragraph, heading). *Type: Dropdown*- 'TableRows': Insert or remove table rows in the selected table. *Type: Dropdown*- 'TableColumns': Insert or remove table columns in the selected table. *Type: Dropdown*- 'TableVAlign': Sets vertical alignment of a selected table cell. *Type: Dropdown*- 'TableStyle': Applies additional styling to the selected table. *Type: Dropdown*- 'BackgroundColor': Changes the background color of the current selection. *Type: Color input*- 'FontColor': Changes the font color of the current selection. *Type: Color input*- 'Bold': Toggles bold for the selected text. *Type: Button*- 'Italic': Toggles italic for the selected text. *Type: Button*- 'Underline': Toggles underline for the selected text. *Type: Button*- 'Strikethrough': Toggles strikethrough for the selected text. *Type: Button*- 'Delete': Deletes the current selection. *Type: Button*- 'Undo': Reverts the last operation. *Type: Button*- 'Redo': Redoes the previously undone operation. *Type: Button*- 'Indent': Increases the indentation of the current selection. *Type: Button*- 'Outdent': Decreases the indentation of the current selection. *Type: Button*- 'OpenLink': Opens the hyperlink of the current selection. *Type: Button*- 'EditLink', 'CreateLink', 'Hyperlink': Creates, edits, or triggers a dialog for hyperlink management. *Type: Button*- 'RemoveLink': Removes a hyperlink from the selected text. *Type: Button*- 'Cut': Cuts the selected content. *Type: Button*- 'Copy': Copies the selected content. *Type: Button*- 'Paste': Pastes from the clipboard. - *Type: Button* - *Type: Dropdown* (when the "advanced" property is set to true)- 'Image': Opens a dialog to insert or edit an image. *Type: Button*- 'Video': Opens a dialog to insert or edit a video. *Type: Button*- 'LowerCase': Converts current selection to lowercase letters. *Type: Button*- 'UpperCase': Converts current selection to uppercase letters. *Type: Button*- 'Print': Opens the browser's print preview window. *Type: Button*- 'Caption': Inserts or removes a caption in the selected table. *Type: Button*- 'ClearFormat': Removes all formatting from the current selection. *Type: Button*- 'Table': Opens a dialog to insert a new table. *Type: Button*- 'TableHeader': Adds or removes a header row in the selected table. *Type: Button*- 'OrderedList': Inserts or removes an ordered (numbered) list. *Type: Button*- 'UnorderedList': Inserts or removes a bulleted list. *Type: Button*- 'Subscript': Formats the selected text as subscript. *Type: Button*- 'Superscript': Formats the selected text as superscript. *Type: Button*- 'FindAndReplace': Opens a dialog to find and replace text in the editor. *Type: Button*'Note:' Separators between toolbar items can be added by using an object without a valid 'name' property.---'inlineToolbarItems' - This property is applicable only for the following toolbar items: 'table', 'image', and 'hyperlink'.- Accepts the same value types and structure as 'toolbarItems'.- The specified items will be displayed in an inline floating toolbar when any of these elements is selected in the editor.---'Summary of Usage Examples:''''json[ "Bold", "Italic", { "name": "FontSize", "options": ["Small", "Medium", "Large"] }, {}, { "name": "custom", "label": "Custom Action", "icon": "..." }]'''- The above would provide bold and italic buttons, a dropdown with custom font size options, a separator, and a custom toolbar item.---This configuration enables full customization of the editor’s toolbar to suit different user requirements, offering both default and extendable options. Click for more details. Property object's options:
  • name:string | null - The unique name of the toolbar item. The list of all possible names is available in the description above.
  • disabled:boolean | null - Determines whethet the item is disabled or not.
  • advanced:boolean | null - Applicable only to item 'paste'. Transforms the type of the Paste toolbar item to drop down list with paste format options.
  • dataSource:string[] | object[] | null - Allows to set a different dataSource for the toolbar items of type 'drop-down' or 'color-input.
  • inlineToolbarItems:string[] | { name?: string, disabled?: boolean, advanced?: boolean, dataSource?: string[] : object[], template?: function | string, width?: string | number }[] - Defines the list of toolbar items for the Inline Toolbar. Accept the same values as toolbarItems property.
  • editor:{ address?: string, target?: string, text?: string, title?: string, file?: File, url?: string, alt?: string, width?: string | number, height?: string | number, caption?: string, alignment?: string, display?: string, draggable?: boolean, resizable?: boolean, rows?: number, cols?: number, tableheader?: boolean, altrows?: boolean, dashedborders?: boolean } | null - Allows to set predefined values for the Dialog Window of the following toolbar items: 'table', 'image', 'video', 'hyperlink'.
    • Property object's options:
    • address:string | null - Allows to preset the value for the hyperlink address field in the Dialog Window.
    • target:string | null - Allows to preset the value for the hyperlink target field in the Dialog Window.
    • text:string | null - Allows to preset the value for the hyperlink text field in the Dialog Window.
    • title:string | null - Allows to preset the value for the hyperlink/image title field in the Dialog Window.
    • file:object - Allows to preset the value for the image/video file uploader in the Dialog Window.
    • alt:string | null - Allows to preset the value for the image/video alt field in the Dialog Window.
    • url:string | null - Allows to preset the value for the image/video url field in the Dialog Window.
    • width:string | number - Allows to preset the value for the image/table/video width field in the Dialog Window.
    • height:string | number - Allows to preset the value for the image/table/video height field in the Dialog Window.
    • caption:string | null - Allows to preset the value for the image/video caption field in the Dialog Window.
    • alignment:string | null - Allows to preset the value for the image/video alignment field in the Dialog Window.
    • display:string | null - Allows to preset the value for the image/video display field in the Dialog Window.
    • draggable:boolean | null - Allows to preset the value for the image draggable field in the Dialog Window.
    • resizable:boolean | null - Allows to preset the value for the image/table/video resizable field in the Dialog Window.
    • cols:number | string | null - Allows to preset the value for the table cols field in the Dialog Window.
    • rows:number | string | null - Allows to preset the value for the table rows field in the Dialog Window.
    • tableheader:boolean | null - Allows to preset the value for the table header field in the Dialog Window.
    • altrows:boolean | null - Allows to preset the value for the table altrows field in the Dialog Window.
    • dashedborders:boolean | null - Allows to preset the value for the table dashedborders field in the Dialog Window.
  • template:function | string | null - Allows to set a template for a custom Toolbar item when the name attribute is set to 'custom'.
  • width:number | string | null - Determines the width of the toolbar item.
TtoolbarModeSpecifies the display style of the Editor’s main toolbar. You can choose between "Ribbon" mode, which presents the toolbar as a horizontal panel with grouped command icons similar to modern office applications, or "Menu" mode, which organizes commands in drop-down menus for a more compact, traditional interface. This setting controls how users interact with the Editor’s primary tools and functions.
TtoolbarRibbonConfigEnables customization of the SingleLineRibbon's appearance by allowing you to modify the arrangement and selection of group items, as well as reorder the groups themselves. This provides flexibility in tailoring the ribbon layout to better suit your application's specific needs.
TtoolbarStickyFixes the Toolbar to the top of the browser window, ensuring it remains visible at all times, even as the user scrolls through the page content.
TtoolbarViewModeSpecifies the format (such as plain text, HTML, or Markdown) that will be applied to content when it is pasted into the Editor. This setting controls how the pasted data is interpreted and ensures that it is correctly displayed within the Editor environment.
UunfocusableIf set to true, this property prevents the element from receiving keyboard or programmatic focus, making it impossible for users to interact with it using the keyboard or assistive technologies.
UunlockKeyGets or sets the unlockKey, a unique value required to activate or unlock the product’s features. Use this property to provide the unlock key when authorizing access, or retrieve the current unlock key associated with the product.
UuploadUrlSpecifies the URL endpoint used for file uploads. This property directly maps to the 'action' attribute of the upload form, determining where the uploaded data is sent on the server. For example, you can set the 'uploadUrl' property to the path of a server-side script such as a PHP file (e.g., "upload.php") that processes and handles incoming file uploads. Setting this property ensures that files selected by the user are transmitted to the specified server location when the upload form is submitted.
UusersDefines the list of editor users for the application. Expects an array of user objects, each requiring the following properties: - ''id'': A unique identifier for the user (string or number). - ''name'': The display name of the user (string). Each user object may also include the following optional properties: - ''color'': A string specifying the user's color (e.g., HEX or CSS color value) for UI highlighting. - ''image'': A string containing the URL of the user's avatar or profile image.
VvalueProvides methods to retrieve or update the current content within the Editor. Use this property to access the existing value or assign a new value to the Editor programmatically.
WwindowCustomizationFunctionA customizable function that allows you to fully modify the appearance and behavior of the Editor dialog used for inserting or editing tables, images, videos, and hyperlinks. The function receives two arguments:- 'target': The dialog element instance that is about to be displayed, representing the specific editor dialog (e.g., Table, Image, Video, or Hyperlink dialog) being opened.- 'item': The toolbar item object that triggered the opening of the dialog, allowing you to access information about the source of the dialog request or customize its settings based on the initiating toolbar action.Use this function to tailor the dialog's UI elements, default values, event handlers, or any other properties, providing a flexible way to match the dialog experience to your application's needs.
ai.key
ai.maxTokens
ai.model
ai.temperature
ai.url
contentFiltering.attributeFilterMode
contentFiltering.attributes
contentFiltering.styleAttributeFilterMode
contentFiltering.styleAttributes
contentFiltering.tagFilterMode
contentFiltering.tags
dataExport.fileName
dataExport.pageOrientation
dataExport.style
iframeSettings.attributes
iframeSettings.enabled
iframeSettings.resources
toolbarItems.advanced
toolbarItems.dataSource
toolbarItems.disabled
toolbarItems.editor
toolbarItems.address
toolbarItems.alignment
toolbarItems.alt
toolbarItems.altrows
toolbarItems.caption
toolbarItems.cols
toolbarItems.dashedborders
toolbarItems.display
toolbarItems.draggable
toolbarItems.file
toolbarItems.height
toolbarItems.resizable
toolbarItems.rows
toolbarItems.tableheader
toolbarItems.target
toolbarItems.text
toolbarItems.title
toolbarItems.url
toolbarItems.width
toolbarItems.editor.inlineToolbarItems
toolbarItems.editor.name
toolbarItems.editor.template
toolbarItems.editor.width

Events

AactionEndThis event is triggered after a Toolbar action has been completed. It signifies that all processes related to the action, such as updating the UI or executing related logic, have finished. Use this event to perform any follow-up tasks when a Toolbar action concludes.
AactionStartThis event is fired immediately before a Toolbar action begins execution, allowing developers to intervene or modify behavior as needed. By invoking event.preventDefault() within the event handler, you can cancel the pending Toolbar action, preventing it from proceeding. This provides an opportunity to implement custom validation, confirmation prompts, or other pre-action logic before the Toolbar action is carried out.
CchangeThis event is triggered when an element loses focus (blur event) and its content has been modified since it last received focus.
CchangingThis event is triggered immediately after the user modifies the content through direct input, such as typing, pasting, or deleting text. It serves as a notification that the content has changed specifically due to user interaction, allowing you to respond to updates made by the user in real time.
CcontextMenuCloseThis event is triggered whenever the Context Menu is closed, either by user action (such as clicking outside the menu, selecting a menu item, or pressing the Escape key) or programmatically through the relevant API. Handlers for this event can be used to perform clean-up tasks or update the user interface in response to the Context Menu being dismissed.
CcontextMenuClosingThis event is fired just before the Context Menu begins to close. By calling event.preventDefault() within the event handler, you can cancel the closing action, allowing you to override or delay the default behavior based on custom logic.
CcontextMenuItemClickThis event is triggered when a user selects and clicks on an item within the context menu. It allows you to execute custom logic in response to specific context menu actions, providing access to details about which menu item was clicked and the relevant context of the interaction.
CcontextMenuOpenThis event is triggered whenever the user opens the context menu, typically by right-clicking or using a designated keyboard shortcut on an element. It allows developers to execute custom logic or modify the context menu's content before it is displayed to the user.
CcontextMenuOpeningThis event is triggered immediately before the context menu appears, typically as a result of a user right-clicking or performing a similar gesture. At this point, you have the opportunity to customize or modify the context menu, or to prevent the menu from opening entirely by calling event.preventDefault() within the event handler.
DdialogCloseThis event is triggered whenever the Dialog Window is closed by the user, either through clicking the close button, pressing the escape key, or programmatically via code. It allows developers to execute custom actions or clean up resources after the dialog has been dismissed.
DdialogClosingThis event is fired immediately before the Dialog Window begins to close. It provides an opportunity to execute custom logic or perform validation before the dialog is dismissed. The closure of the dialog can be canceled by calling event.preventDefault() within the event handler.
DdialogOpenThis event is triggered when the Dialog Window is successfully opened and becomes visible to the user.
DdialogOpeningThis event is fired immediately before the Dialog Window begins to open, giving developers an opportunity to perform actions or modify options prior to rendering. You can cancel the default behavior and prevent the Dialog Window from opening by calling event.preventDefault() within the event handler.
DdropDownToolbarCloseThis event is triggered whenever the Drop Down Toolbar is closed, either by user interaction (such as clicking outside the toolbar or selecting an option) or programmatically via the application's code. Use this event to perform actions or update the user interface in response to the toolbar being dismissed.
DdropDownToolbarClosingThis event is fired when the Drop Down Toolbar begins its closing process. Within the event handler, you can prevent the toolbar from closing by invoking event.preventDefault(). This provides an opportunity to execute custom logic, such as confirming the action with the user or validating conditions before allowing the toolbar to close.
DdropDownToolbarOpenThis event is triggered each time the Drop Down Toolbar becomes visible to the user, such as when it is expanded or opened. You can use this event to execute custom logic whenever the toolbar is displayed, for example, to load dynamic content or adjust UI elements within the toolbar.
DdropDownToolbarOpeningThis event is triggered just before the Drop Down Toolbar begins to open. Within the event handler, you can call event.preventDefault() to cancel the opening operation, allowing you to customize or prevent the display of the toolbar based on specific conditions. This provides an opportunity to implement custom logic before the toolbar becomes visible to the user.
IimageUploadFailedThis event is triggered when an attempt to upload an image or video fails, indicating that the file was not successfully transferred to the server due to an error or interruption during the upload process.
IimageUploadSuccessThis event is triggered when an image or video file has been uploaded successfully to the server. It indicates the completion of the upload process without errors, allowing you to perform additional actions such as displaying a success message or updating the user interface.
IinlineToolbarCloseThis event is triggered whenever the inline toolbar is closed, either by user interaction (such as clicking outside the toolbar, pressing Esc, or selecting a toolbar option) or programmatically via code. It provides an opportunity to perform cleanup, update UI elements, or execute additional logic in response to the toolbar being dismissed.
IinlineToolbarClosingThis event is triggered immediately before the inline toolbar begins to close, allowing you to perform actions or cleanup tasks in response to the toolbar's closure.
IinlineToolbarOpenThis event is triggered whenever the inline Toolbar becomes visible to the user, such as when a user selects text or performs an action that causes the Toolbar to appear within the interface. Use this event to run custom logic or adjust UI elements in response to the Toolbar opening.
IinlineToolbarOpeningThis event is fired just before the inline Toolbar begins to open. Developers can intercept this event and prevent the Toolbar from opening by invoking event.preventDefault() within the event handler. This allows for conditional control over the Toolbar's visibility based on custom application logic.
MmessageCloseThis event is triggered whenever a user closes a message, such as dismissing a notification or alert. It allows you to execute custom logic in response to the message being removed from the user interface.
MmessageOpenThis event is triggered whenever a user opens or views a message, indicating that the message content has become visible or active in the user interface. It can be used to track message engagement, update message status, or initiate follow-up actions when a message is accessed.
RresizeEndThis event is triggered when the user has completed resizing an image, table, or video element. It fires after the resizing action ends, allowing you to perform actions such as saving the new dimensions or updating the layout in response to the change.
RresizeStartThis event is triggered when a user initiates the resizing of an image, table, or video element. It indicates that the resizing operation has begun, allowing you to implement custom behaviors or UI updates in response to the start of a resize action.
TtoobarItemClickThis event is triggered whenever a user clicks on an item within the Toolbar. It provides relevant information about the clicked item, allowing you to execute custom logic or actions in response to the user's interaction with the Toolbar.

Methods

AaddToolbarItemIntegrates a custom item into the editor’s toolbar. **Example Usage:**```jseditor.addToolbarItem({ name: 'customButton2', // Unique identifier for the toolbar item width: 100, // Width of the toolbar item in pixels template: 'Button2' // Custom HTML template defining the toolbar item's appearance and content});```**Description:** This method allows you to add a new, customizable button or element to the editor’s toolbar. You specify a unique name, the width, and provide an HTML template for the item’s content. This enables the creation of tailored toolbar controls to enhance your editor’s functionality according to your application’s needs.
BblurApplies a blur effect to the content area of the Editor, visually obscuring text and elements to reduce readability while maintaining overall layout and structure. This feature is useful for masking sensitive information or creating a focus effect within the Editor interface.
CclearContentRemoves all text and formatting from the Editor, resetting its content to an empty state.
CclearStateRemoves all previously saved states associated with the current Editor's ID from the local storage. This ensures that any stored data related to this specific Editor instance is deleted, allowing for a fresh start or preventing data conflicts.
CcollapseToolbarCollapse the toolbar when the toolbarViewMode property is set to 'toggle'. This ensures that the toolbar is hidden or shown based on the toggle state, allowing for a dynamic and responsive user interface.
DdisableToolbarItemPrevents user interaction with the specified Toolbar item, making it inactive and visually indicating that it is disabled. The item remains visible but cannot be clicked or selected until re-enabled.
EenableToolbarItemRestores the functionality of a Toolbar item that was previously disabled, allowing users to click or interact with it again. This action visually updates the item to indicate it is active and accessible within the Toolbar interface.
EexecuteCommandEnhances the clarity, consistency, and completeness of the description:---Executes a command using the native execCommand method to modify the contents or formatting of the editor. This method returns true if the command executes successfully or false otherwise. You can use this function to apply a wide range of editing and formatting commands to the currently selected content, or at the current cursor position.Supported commands include: bold: Toggles bold formatting on the selected text. Example: editor.executeCommand('bold'); italic: Toggles italic formatting on the selected text. Example: editor.executeCommand('italic'); underline: Toggles underline formatting on the selected text. Example: editor.executeCommand('underline'); strikeThrough: Toggles strikethrough formatting on the selected text. Example: editor.executeCommand('strikeThrough'); superscript: Sets the selected text as superscript. Example: editor.executeCommand('superscript'); subscript: Sets the selected text as subscript. Example: editor.executeCommand('subscript'); uppercase: Converts the selected text to uppercase. Example: editor.executeCommand('uppercase'); lowercase: Converts the selected text to lowercase. Example: editor.executeCommand('lowercase'); foreColor: Changes the font color of the selected text. Example: editor.executeCommand('foreColor', '#000000'); fontName: Changes the font family of the selected text. Example: editor.executeCommand('fontName', 'Arial'); fontSize: Changes the font size of the selected text. Example: editor.executeCommand('fontSize', '15px'); hiliteColor: Changes the background color (highlight) of the selected text. Example: editor.executeCommand('hiliteColor', '#FFFF00'); justifyCenter: Aligns the selected content to the center. Example: editor.executeCommand('justifyCenter'); justifyFull: Justifies the selected content. Example: editor.executeCommand('justifyFull'); justifyLeft: Aligns the selected content to the left. Example: editor.executeCommand('justifyLeft'); justifyRight: Aligns the selected content to the right. Example: editor.executeCommand('justifyRight'); undo: Undoes the last editing operation. Example: editor.executeCommand('undo'); redo: Redoes the previously undone operation. Example: editor.executeCommand('redo'); createLink: Inserts a hyperlink at the current selection. Accepts an object with text, url, and title properties. Example: editor.executeCommand('createLink', { text: 'Link', url: 'https://example.com', title: 'Example Link' }); indent: Increases the indent level of the selected content. Example: editor.executeCommand('indent'); outdent: Decreases the indent level of the selected content. Example: editor.executeCommand('outdent'); insertHTML: Inserts an HTML string at the current cursor position. Example: editor.executeCommand('insertHTML', '<p>Text</p>'); insertOrderedList: Inserts an ordered (numbered) list. Example: editor.executeCommand('insertOrderedList'); insertUnorderedList: Inserts an unordered (bulleted) list. Example: editor.executeCommand('insertUnorderedList'); removeFormat: Removes all formatting from the selected text. Example: editor.executeCommand('removeFormat'); insertText: Inserts plain text at the current cursor position. Example: editor.executeCommand('insertText', 'Some text to insert'); insertImage: Inserts an image at the current cursor position. Accepts an object with a url property. Example: editor.executeCommand('insertImage', { url: 'https://www.example.com/image.jpg' }); Note: Some commands may not be fully supported in all browsers due to the deprecated status of execCommand. Always test your implementation for compatibility with your target browsers.
EexpandToolbarExpands the Toolbar only when the toolbarViewMode property is set to 'toggle'. When this mode is active, the Toolbar will automatically display its full set of options and controls as specified. If toolbarViewMode is set to another value, this expansion behavior will not occur.
EexportDataExports the content of the Editor in your chosen format. Currently supported export formats include HTML, Markdown, and PDF. This allows you to save or share your work in the format that best suits your needs.
FfocusSets the input focus to the Editor component, enabling users to interact with and edit its content directly (e.g., by typing or using keyboard shortcuts). This action ensures that keyboard events and commands are directed to the Editor.
FfullScreenModeEnables Full Screen Mode for the Editor. When activated, the Editor expands to cover the entire viewport, overlaying all other page content and providing a distraction-free editing environment.
GgetCharCountReturns the total number of characters currently present within the Editor's content, including spaces and special characters.
GgetHTMLReturns the current content of the Editor as an HTML string. If editMode is set to 'markdown', the raw Markdown input is automatically parsed and converted to HTML before being returned. In all modes, the result is a well-formed HTML representation of the Editor's content, suitable for rendering in web pages or for further processing.
GgetSelectionRangeReturns the current selection range within the editor. By default, this method returns an object of type Range, which represents the start and end positions of the selection as DOM nodes and offsets. However, if the editMode property is set to 'markdown', the method instead returns a plain object containing the numerical start and end indexes of the selection within the raw text content. This allows for consistent selection handling in both WYSIWYG and markdown editing modes.
GgetTextReturns the current contents of the Editor component as a plain text string, excluding any formatting or markup. This allows you to retrieve only the raw textual data entered by the user.
HhideLastMessageConceals or removes the most recently displayed message from view on the user interface, ensuring it is no longer visible to the user.
HhideMessageConceals a specified message when an identifier is provided; if no identifier is given, all messages will be hidden.
IimportDataAllows users to import the contents of a file directly into the Editor. Currently, only plain text (.txt) and HTML (.html) file formats are supported. Upon import, the file’s contents will be automatically loaded and displayed within the Editor for further editing or review.
IinsertToolbarItemInserts a new custom Toolbar item into the editor. For example, you can add a button with the following code:```javascripteditor.insertToolbarItem({ name: 'customButton2', // Unique identifier for the toolbar item width: 100, // Specifies the width of the toolbar item in pixels template: 'Button2' // The HTML template that defines the toolbar item's appearance and functionality});```This method allows you to extend the editor’s toolbar by specifying a unique name for the item, its display width, and a custom HTML template, such as a button or other UI component. This makes it easy to add interactive or specialized controls directly to your editor's toolbar.
LloadStateRestores the most recently saved state of the Editor from the browser’s local storage. To identify and retrieve the correct data, an id property must be assigned to the Editor instance. If no saved state exists for the specified id, the Editor will load with its default settings.
PpreviewModeSwitches the Editor between Source Code and Preview modes. When activated, this mode displays the HTML view panel, allowing users to directly edit or review the underlying HTML code.
PprintOpens the browser’s Print Preview dialog, allowing users to view and print the current content displayed within the Editor. This feature provides a formatted preview of the Editor's contents as they will appear on the printed page before finalizing the print command.
RremoveToolbarItemRemoves a specified item from the Toolbar by its index. For example, editor.removeToolbarItem(0) will remove the first item in the Toolbar. Use this method to dynamically update the Toolbar based on user interaction or application state.
SsaveStatePersists the Editor’s current state to the browser’s local storage, allowing users to restore their work in future sessions. Note: An id property must be assigned to the Editor instance to uniquely identify and manage its saved data.
SselectAllHighlights and selects all text currently displayed within the Editor's content area, allowing users to easily copy, cut, or replace the selected text.
SselectRangeEnhancement:"Selects a specified range of text within the Editor based on provided start and end indexes. This method locates the DOM nodes containing the targeted text and creates selection ranges accordingly. Note that only Firefox currently supports selecting multiple, non-contiguous ranges; in other browsers, only the first corresponding node or range will be selected. If the editor is operating in 'html' editMode, the entire content is treated as a single node. As a result, the desired text range will be reliably selected across all browsers in this mode."
SsetLocaleSets the locale of a component.
SshowMessageDisplays a customizable message within the Editor interface, allowing users to present important information, instructions, or notifications directly inside the editing environment.
SsplitModeEnables Split Mode in the Editor. When Split Mode is active, both the HTML/Markdown editing panel and the Source Code/Preview panel are displayed side by side, allowing users to simultaneously view and edit the content along with its rendered output or source code. This mode enhances workflow by providing real-time feedback and easier navigation between editing and previewing.
UupdateToolbarItemEnables the modification of settings for a specified toolbar item. This method returns true if the update is applied successfully, indicating the toolbar item's settings were changed as requested. If the update fails, the method returns false.

Properties

aiAn object that defines configuration settings for integrating AI capabilities within the grid, including options for enabling AI features, specifying AI service endpoints, adjusting model parameters, and customizing AI-driven functionality in the grid interface. Click for more details. Property object's options:
     object

    An object that defines configuration settings for integrating AI capabilities within the grid, including options for enabling AI features, specifying AI service endpoints, adjusting model parameters, and customizing AI-driven functionality in the grid interface.

    Properties

    modelThe AI model used for text generation or other AI-powered features.
    maxTokensThe maximum number of tokens (words/characters) the AI can generate in a single request
    temperatureControls the randomness of AI output. Lower values produce more focused results; higher values are more creative.
    urlThe endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.
    keyThe API key used to authenticate requests to the AI provider.

    keyThe API key used to authenticate requests to the AI provider.string

    The API key used to authenticate requests to the AI provider.

    Default value

    ""

    Back to root property: ai

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-editor');
el.ai.key = "your-api-key-here";

    Read the nested value:

    const el = document.querySelector('smart-editor');
const key = el.ai.key;

    maxTokensThe maximum number of tokens (words/characters) the AI can generate in a single requestnumber

    The maximum number of tokens (words/characters) the AI can generate in a single request

    Default value

    200

    Back to root property: ai

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-editor');
el.ai.maxTokens = 200;

    Read the nested value:

    const el = document.querySelector('smart-editor');
const maxTokens = el.ai.maxTokens;

    modelThe AI model used for text generation or other AI-powered features.string

    The AI model used for text generation or other AI-powered features.

    Default value

    "gpt-3.5-turbo"

    Back to root property: ai

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-editor');
el.ai.model = "gpt-4";

    Read the nested value:

    const el = document.querySelector('smart-editor');
const model = el.ai.model;

    temperatureControls the randomness of AI output. Lower values produce more focused results; higher values are more creative.number

    Controls the randomness of AI output. Lower values produce more focused results; higher values are more creative.

    Default value

    0.7

    Back to root property: ai

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-editor');
el.ai.temperature = 0.7;

    Read the nested value:

    const el = document.querySelector('smart-editor');
const temperature = el.ai.temperature;

    urlThe endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.string

    The endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.

    Default value

    ""

    Back to root property: ai

    Try a demo showcasing the url property.

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-editor');
el.ai.url = "https://your-backend.com/ai";

    Read the nested value:

    const el = document.querySelector('smart-editor');
const url = el.ai.url;

    animationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the selected mode."none" | "simple" | "advanced"

    Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the selected mode.

    Allowed Values

    • "none" - animation is disabled
    • "simple" - ripple animation is disabled
    • "advanced" - all animations are enabled

    Default value

    "advanced"

    Examples

    Markup and runtime examples for animation:

    HTML:

    <smart-editor animation="none"></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.animation = "simple";

    Read the current value:

    const el = document.querySelector('smart-editor');
const animation = el.animation;

    autoFormattingAutomatically formats your text in real-time as you type, converting your input into structured elements such as bullet points, checkboxes, headings, and code blocks. This feature streamlines note-taking and writing by instantly applying consistent formatting without requiring manual markup or additional steps.boolean

    Automatically formats your text in real-time as you type, converting your input into structured elements such as bullet points, checkboxes, headings, and code blocks. This feature streamlines note-taking and writing by instantly applying consistent formatting without requiring manual markup or additional steps.

    Default value

    true

    Examples

    Markup and runtime examples for autoFormatting:

    HTML attribute:

    <smart-editor auto-formatting></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.autoFormatting = false;

    Read the current value:

    const el = document.querySelector('smart-editor');
const autoFormatting = el.autoFormatting;

    autoLoadAutomatically restores the editor's most recently saved state from the browser's local storage when the element is initialized. To retrieve the correct saved state, you must specify a unique id that matches the one used during the saving process. Without this id, the editor cannot identify or load the previously stored state.boolean

    Automatically restores the editor's most recently saved state from the browser's local storage when the element is initialized. To retrieve the correct saved state, you must specify a unique id that matches the one used during the saving process. Without this id, the editor cannot identify or load the previously stored state.

    Default value

    false
    Try a demo showcasing the autoLoad property.

    Examples

    Markup and runtime examples for autoLoad:

    HTML attribute:

    <smart-editor auto-load></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.autoLoad = false;

    Read the current value:

    const el = document.querySelector('smart-editor');
const autoLoad = el.autoLoad;

    autoSaveAutomatically saves the editor's current content at regular intervals specified by the autoSaveInterval property, but only while the editor element is focused. To enable automatic saving, you must assign a unique id to the editor element; this id is used to store and retrieve the editor's saved state.boolean

    Automatically saves the editor's current content at regular intervals specified by the autoSaveInterval property, but only while the editor element is focused. To enable automatic saving, you must assign a unique id to the editor element; this id is used to store and retrieve the editor's saved state.

    Default value

    false
    Try a demo showcasing the autoSave property.

    Examples

    Markup and runtime examples for autoSave:

    HTML attribute:

    <smart-editor auto-save></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.autoSave = false;

    Read the current value:

    const el = document.querySelector('smart-editor');
const autoSave = el.autoSave;

    autoSaveIntervalSpecifies the time interval, in milliseconds, at which the Editor automatically saves its state when the autoSave property is enabled. This property controls how frequently the Editor performs auto-save operations.number

    Specifies the time interval, in milliseconds, at which the Editor automatically saves its state when the autoSave property is enabled. This property controls how frequently the Editor performs auto-save operations.

    Default value

    1000
    Try a demo showcasing the autoSaveInterval property.

    Examples

    Markup and runtime examples for autoSaveInterval:

    HTML:

    <smart-editor auto-save-interval="2000"></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.autoSaveInterval = 500;

    Read the current value:

    const el = document.querySelector('smart-editor');
const autoSaveInterval = el.autoSaveInterval;

    autoUploadControls whether files are automatically uploaded immediately after the user selects them. When enabled, the upload process begins as soon as files are chosen. When disabled, file upload must be triggered manually. This property can be used to either retrieve the current auto-upload setting or update it.boolean

    Controls whether files are automatically uploaded immediately after the user selects them. When enabled, the upload process begins as soon as files are chosen. When disabled, file upload must be triggered manually. This property can be used to either retrieve the current auto-upload setting or update it.

    Default value

    false

    Examples

    Markup and runtime examples for autoUpload:

    HTML attribute:

    <smart-editor auto-upload></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.autoUpload = false;

    Read the current value:

    const el = document.querySelector('smart-editor');
const autoUpload = el.autoUpload;

    charCountFormatFunctionA customizable formatting function for the character counter display in the Editor. This function receives two parameters:- chars: The current number of characters entered by the user in the Editor.- maxCharCount: The maximum allowed number of characters for the Editor input.The function should return a formatted string that represents the character count status, which will be shown in the Editor’s UI (for example, "25 / 100 characters"). This allows developers to define custom formats for how the character count is displayed to users.function | null

    A customizable formatting function for the character counter display in the Editor. This function receives two parameters:

    - chars: The current number of characters entered by the user in the Editor.
    - maxCharCount: The maximum allowed number of characters for the Editor input.

    The function should return a formatted string that represents the character count status, which will be shown in the Editor’s UI (for example, "25 / 100 characters"). This allows developers to define custom formats for how the character count is displayed to users.

    Examples

    Markup and runtime examples for charCountFormatFunction:

    HTML:

    <smart-editor char-count-format-function="function (chars, maxCharCount) { return 'Chars: + chars }"></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.charCountFormatFunction = "function (chars, maxCharCount) { return maxCharCount - chars + 'left'";

    Read the current value:

    const el = document.querySelector('smart-editor');
const charCountFormatFunction = el.charCountFormatFunction;

    content_cssDefines the CSS file(s) or styles to be applied to the content area within the Editor, allowing you to customize the appearance and formatting of the editor’s content.string

    Defines the CSS file(s) or styles to be applied to the content area within the Editor, allowing you to customize the appearance and formatting of the editor’s content.

    Default value

    ""

    Examples

    Markup and runtime examples for content_css:

    HTML:

    <smart-editor content_css=".blue { color: blue;}"></smart-editor>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-editor');
el.content_css = ".red {color: red;}";

    Read the current value:

    const el = document.querySelector('smart-editor');
const content_css = el.content_css;

    contentFilteringSpecifies the configuration for content filtering, allowing you to define which types of content are allowed or blocked according to the selected criteria or rules. Click for more details. Property object's options:
       object

      Specifies the configuration for content filtering, allowing you to define which types of content are allowed or blocked according to the selected criteria or rules.

      Properties

      attributesDetermines which element attributes to filter.
      attributeFilterModeDetermines whether to allow (whiteList) or remove (blackList) the specified attributes.
      tagsDetermines which element tags to filter.
      tagFilterModeDetermines whether to allow (whiteList) or remove (blackList) the specified tags.
      styleAttributesDetermines which style attributes to filter.
      styleAttributeFilterModeDetermines whether to allow (whiteList) or remove (blackList) the specified style attributes.
      Try a demo showcasing the contentFiltering property.

      attributeFilterModeDetermines whether to allow (whiteList) or remove (blackList) the specified attributes."blackList" | "whiteList"

      Determines whether to allow (whiteList) or remove (blackList) the specified attributes.

      Default value

      "blackList"

      Back to root property: contentFiltering

      Try a demo showcasing the attributeFilterMode property.

      Read the nested value:

      const el = document.querySelector('smart-editor');
const attributeFilterMode = el.contentFiltering.attributeFilterMode;

      attributesDetermines which element attributes to filter.string[]

      Determines which element attributes to filter.

      Back to root property: contentFiltering

      Try a demo showcasing the attributes property.

      Read the nested value:

      const el = document.querySelector('smart-editor');
const attributes = el.contentFiltering.attributes;

      styleAttributeFilterModeDetermines whether to allow (whiteList) or remove (blackList) the specified style attributes."blackList" | "whiteList"

      Determines whether to allow (whiteList) or remove (blackList) the specified style attributes.

      Default value

      "blackList"

      Back to root property: contentFiltering

      Try a demo showcasing the styleAttributeFilterMode property.

      Read the nested value:

      const el = document.querySelector('smart-editor');
const styleAttributeFilterMode = el.contentFiltering.styleAttributeFilterMode;

      styleAttributesDetermines which style attributes to filter.string[]

      Determines which style attributes to filter.

      Back to root property: contentFiltering

      Try a demo showcasing the styleAttributes property.

      Read the nested value:

      const el = document.querySelector('smart-editor');
const styleAttributes = el.contentFiltering.styleAttributes;

      tagFilterModeDetermines whether to allow (whiteList) or remove (blackList) the specified tags."blackList" | "whiteList"

      Determines whether to allow (whiteList) or remove (blackList) the specified tags.

      Default value

      "blackList"

      Back to root property: contentFiltering

      Try a demo showcasing the tagFilterMode property.

      Read the nested value:

      const el = document.querySelector('smart-editor');
const tagFilterMode = el.contentFiltering.tagFilterMode;

      tagsDetermines which element tags to filter.string[]

      Determines which element tags to filter.

      Back to root property: contentFiltering

      Try a demo showcasing the tags property.

      Read the nested value:

      const el = document.querySelector('smart-editor');
const tags = el.contentFiltering.tags;

      contextMenuSpecifies the items and structure of the context menu that appears when a user right-clicks within the Editor's content area. This setting allows you to customize which menu options are available based on the user's actions, providing tailored functionality and quick access to relevant commands."default" | "browser" | "none"

      Specifies the items and structure of the context menu that appears when a user right-clicks within the Editor's content area. This setting allows you to customize which menu options are available based on the user's actions, providing tailored functionality and quick access to relevant commands.

      Allowed Values

      • "default" - The Editor's build in context menu is used.
      • "browser" - The browser's native context menu is used.
      • "none" - The context menu is disabled.

      Default value

      "default"
      Try a demo showcasing the contextMenu property.

      Examples

      Markup and runtime examples for contextMenu:

      HTML:

      <smart-editor context-menu="browser"></smart-editor>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-editor');
el.contextMenu = "none";

      Read the current value:

      const el = document.querySelector('smart-editor');
const contextMenu = el.contextMenu;

      contextMenuDataSourceEnhances the Editor’s context menu by allowing you to customize its default items. This property accepts several formats:- 'Array of Items:' You can provide an array where each item is either: - A 'string' representing the value/action for the menu item. - An 'object' in the format '{ label: string, value: string }', where: - 'label' is the text displayed in the menu. - 'value' is the action or identifier associated with that menu item.- 'Function:' You can also pass a function that dynamically generates the array of menu items. The function receives the following parameters: - 'target' ('HTMLElement'): The DOM element where the context menu is triggered. - 'type' ('string'): The type or context of the menu (e.g., "table", "image", "link", or other relevant context types). - 'defaultItems' ('string[]'): The default set of menu item identifiers for that context. The function should return an array of menu items (as described above), which will be rendered in place of the default menu.'Example function signature:''''javascriptfunction (target: HTMLElement, type: string, defaultItems: string[]) { return defaultItems;}'''This flexible property enables you to tailor the context menu based on the user's selection, the specific element targeted, or the context of the interaction, helping create a more intuitive and relevant editing experience.string[] | { label: string, value: 'string' }[] | Function | null

      Enhances the Editor’s context menu by allowing you to customize its default items. This property accepts several formats:

      - 'Array of Items:'
      You can provide an array where each item is either:
      - A 'string' representing the value/action for the menu item.
      - An 'object' in the format '{ label: string, value: string }', where:
      - 'label' is the text displayed in the menu.
      - 'value' is the action or identifier associated with that menu item.

      - 'Function:'
      You can also pass a function that dynamically generates the array of menu items. The function receives the following parameters:
      - 'target' ('HTMLElement'): The DOM element where the context menu is triggered.
      - 'type' ('string'): The type or context of the menu (e.g., "table", "image", "link", or other relevant context types).
      - 'defaultItems' ('string[]'): The default set of menu item identifiers for that context.

      The function should return an array of menu items (as described above), which will be rendered in place of the default menu.

      'Example function signature:'
      '''javascript
      function (target: HTMLElement, type: string, defaultItems: string[]) {
      return defaultItems;
      }
      '''

      This flexible property enables you to tailor the context menu based on the user's selection, the specific element targeted, or the context of the interaction, helping create a more intuitive and relevant editing experience.

      Try a demo showcasing the contextMenuDataSource property.

      Examples

      Markup and runtime examples for contextMenuDataSource:

      HTML:

      <smart-editor context-menu-data-source="function (target, type, defaultItems) { return defaultItems }"></smart-editor>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-editor');
el.contextMenuDataSource = ['copy', 'cut', 'paste', 'selectAll'];

      Read the current value:

      const el = document.querySelector('smart-editor');
const contextMenuDataSource = el.contextMenuDataSource;

      dataExportConfigures the available options for exporting data from the Editor, such as file formats (CSV, JSON, XML), export settings, and customization preferences. These settings determine how users can save or export content from the Editor. Click for more details. Property object's options:
         object

        Configures the available options for exporting data from the Editor, such as file formats (CSV, JSON, XML), export settings, and customization preferences. These settings determine how users can save or export content from the Editor.

        Properties

        styleSets a custom style object of the dataExport.
        fileNameSets the exported file's name.
        pageOrientationSets the page orientation, when exporting to PDF.
        Try a demo showcasing the dataExport property.

        fileNameSets the exported file's name.string

        Sets the exported file's name.

        Default value

        "smartScheduler"

        Back to root property: dataExport

        Read the nested value:

        const el = document.querySelector('smart-editor');
const fileName = el.dataExport.fileName;

        pageOrientationSets the page orientation, when exporting to PDF.string

        Sets the page orientation, when exporting to PDF.

        Default value

        "portrait"

        Back to root property: dataExport

        Read the nested value:

        const el = document.querySelector('smart-editor');
const pageOrientation = el.dataExport.pageOrientation;

        styleSets a custom style object of the dataExport. object

        Sets a custom style object of the dataExport.

        Back to root property: dataExport

        Try a demo showcasing the style property.

        Read the nested value:

        const el = document.querySelector('smart-editor');
const style = el.dataExport.style;

        disabledControls whether the Editor component is active or inactive. When enabled, users can interact with and make changes within the Editor; when disabled, all editing functionalities are restricted or unavailable.boolean

        Controls whether the Editor component is active or inactive. When enabled, users can interact with and make changes within the Editor; when disabled, all editing functionalities are restricted or unavailable.

        Default value

        false
        Try a demo showcasing the disabled property.

        Examples

        Markup and runtime examples for disabled:

        HTML attribute:

        <smart-editor disabled></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.disabled = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const disabled = el.disabled;

        disableEditingPrevents users from modifying or editing content within the Editor, making all content read-only.boolean

        Prevents users from modifying or editing content within the Editor, making all content read-only.

        Default value

        false

        Examples

        Markup and runtime examples for disableEditing:

        HTML attribute:

        <smart-editor disable-editing></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.disableEditing = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const disableEditing = el.disableEditing;

        disableSearchBarPrevents the Quick Search Bar from appearing or being accessible to users, effectively disabling its functionality across the application.boolean

        Prevents the Quick Search Bar from appearing or being accessible to users, effectively disabling its functionality across the application.

        Default value

        false

        Examples

        Markup and runtime examples for disableSearchBar:

        HTML attribute:

        <smart-editor disable-search-bar></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.disableSearchBar = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const disableSearchBar = el.disableSearchBar;

        editModeSpecifies the editing mode for the Editor component. By default, the Editor operates in standard HTML mode, allowing users to input and edit HTML content directly. In this mode, pressing Enter inserts line breaks or new paragraphs according to standard HTML behavior. When set to 'blockHtml', the Editor creates new DIV elements each time the user presses Enter, promoting a block-based editing experience. This mode also provides built-in commands tailored for structured data entry and manipulation.If set to 'markdown', the Editor functions as a dedicated Markdown editor. User input is interpreted as Markdown syntax, and the Editor automatically parses and converts the Markdown content into HTML for real-time preview. This enables a seamless writing and formatting workflow for users who prefer Markdown.Possible values:- 'html' (default): Accepts and parses HTML input.- 'blockHtml': Uses DIV tags for new blocks and offers additional commands for data input.- 'markdown': Enables Markdown syntax input with live HTML preview."html" | "markdown" | "blockHtml"

        Specifies the editing mode for the Editor component. By default, the Editor operates in standard HTML mode, allowing users to input and edit HTML content directly. In this mode, pressing Enter inserts line breaks or new paragraphs according to standard HTML behavior.

        When set to 'blockHtml', the Editor creates new DIV elements each time the user presses Enter, promoting a block-based editing experience. This mode also provides built-in commands tailored for structured data entry and manipulation.

        If set to 'markdown', the Editor functions as a dedicated Markdown editor. User input is interpreted as Markdown syntax, and the Editor automatically parses and converts the Markdown content into HTML for real-time preview. This enables a seamless writing and formatting workflow for users who prefer Markdown.

        Possible values:
        - 'html' (default): Accepts and parses HTML input.
        - 'blockHtml': Uses DIV tags for new blocks and offers additional commands for data input.
        - 'markdown': Enables Markdown syntax input with live HTML preview.

        Default value

        "html"
        Try a demo showcasing the editMode property.

        Examples

        Markup and runtime examples for editMode:

        HTML:

        <smart-editor edit-mode="markdown,html"></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.editMode = "html,markdown";

        Read the current value:

        const el = document.querySelector('smart-editor');
const editMode = el.editMode;

        enableHtmlEncodeSpecifies whether the output from the getHTML method and the Source Code view should be HTML-encoded. When enabled, special characters in the code (such as <, >, and &) are converted to their HTML entity equivalents, ensuring correct display and preventing unintended HTML rendering. When disabled, the values are returned as raw HTML without encoding.boolean

        Specifies whether the output from the getHTML method and the Source Code view should be HTML-encoded. When enabled, special characters in the code (such as <, >, and &) are converted to their HTML entity equivalents, ensuring correct display and preventing unintended HTML rendering. When disabled, the values are returned as raw HTML without encoding.

        Default value

        false

        Examples

        Markup and runtime examples for enableHtmlEncode:

        HTML attribute:

        <smart-editor enable-html-encode></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.enableHtmlEncode = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const enableHtmlEncode = el.enableHtmlEncode;

        enablePagesActivates the editor pages functionality, allowing users to create, edit, and manage custom pages directly within the editor interface.boolean

        Activates the editor pages functionality, allowing users to create, edit, and manage custom pages directly within the editor interface.

        Default value

        false

        Examples

        Markup and runtime examples for enablePages:

        HTML attribute:

        <smart-editor enable-pages></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.enablePages = true;

        Read the current value:

        const el = document.querySelector('smart-editor');
const enablePages = el.enablePages;

        enableTabKeySpecifies whether pressing the Tab key inside the Editor will insert a tab character at the cursor position, or instead move focus to the next focusable element (default behavior). When enabled, Tab inserts a tab character; when disabled, Tab shifts focus as usual.boolean

        Specifies whether pressing the Tab key inside the Editor will insert a tab character at the cursor position, or instead move focus to the next focusable element (default behavior). When enabled, Tab inserts a tab character; when disabled, Tab shifts focus as usual.

        Default value

        false

        Examples

        Markup and runtime examples for enableTabKey:

        HTML attribute:

        <smart-editor enable-tab-key></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.enableTabKey = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const enableTabKey = el.enableTabKey;

        findAndReplaceTimeoutSpecifies the duration (in milliseconds) between consecutive result updates when using the "Find and Replace" and "Search Bar" features. Adjusting this interval can affect how quickly search results are refreshed and displayed to the user during searches.number

        Specifies the duration (in milliseconds) between consecutive result updates when using the "Find and Replace" and "Search Bar" features. Adjusting this interval can affect how quickly search results are refreshed and displayed to the user during searches.

        Default value

        50

        Examples

        Markup and runtime examples for findAndReplaceTimeout:

        HTML:

        <smart-editor find-and-replace-timeout="500"></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.findAndReplaceTimeout = 50;

        Read the current value:

        const el = document.querySelector('smart-editor');
const findAndReplaceTimeout = el.findAndReplaceTimeout;

        hideInlineToolbarSpecifies whether the Inline Toolbar is visible. If set to true, the toolbar will be hidden; if false, the toolbar will be displayed.boolean

        Specifies whether the Inline Toolbar is visible. If set to true, the toolbar will be hidden; if false, the toolbar will be displayed.

        Default value

        false

        Examples

        Markup and runtime examples for hideInlineToolbar:

        HTML attribute:

        <smart-editor hide-inline-toolbar></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.hideInlineToolbar = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const hideInlineToolbar = el.hideInlineToolbar;

        hideToolbarSpecifies whether the Toolbar is visible or hidden. When set to true, the Toolbar will be hidden; when set to false, the Toolbar will be displayed.boolean

        Specifies whether the Toolbar is visible or hidden. When set to true, the Toolbar will be hidden; when set to false, the Toolbar will be displayed.

        Default value

        false

        Examples

        Markup and runtime examples for hideToolbar:

        HTML attribute:

        <smart-editor hide-toolbar></smart-editor>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-editor');
el.hideToolbar = false;

        Read the current value:

        const el = document.querySelector('smart-editor');
const hideToolbar = el.hideToolbar;

        iframeSettingsSpecifies the iframe configuration for the Editor. When enabled, the Editor's content is rendered within an isolated iframe, ensuring separation from the main DOM and preventing style or script conflicts. This option enhances content security and encapsulation. Additionally, it provides a mechanism to inject external resources (such as stylesheets or scripts) directly into the iframe environment if required. Click for more details. Property object's options:
           object

          Specifies the iframe configuration for the Editor. When enabled, the Editor's content is rendered within an isolated iframe, ensuring separation from the main DOM and preventing style or script conflicts. This option enhances content security and encapsulation. Additionally, it provides a mechanism to inject external resources (such as stylesheets or scripts) directly into the iframe environment if required.

          Properties

          attributesDetermines the attributes and their values that will be set to the iframe. Here's how to define attributes: 
          attributes: { height: 500 }
          enabledEnables/Disables the usage of an iframe for the content of the Editor.
          resourcesDetermines the resources like scripts/styles that will be imported into the iframe. Here's how to define resources: 
          resources: { 'style': { href: 'styles.css' }, 'script': { src: 'index.js', type: 'module' }}
          Try a demo showcasing the iframeSettings property.

          attributesDetermines the attributes and their values that will be set to the iframe. Here's how to define attributes: 
          attributes: { height: 500 }
          object

          Determines the attributes and their values that will be set to the iframe. Here's how to define attributes: 

          attributes: { height: 500 }

          Back to root property: iframeSettings

          Try a demo showcasing the attributes property.

          Read the nested value:

          const el = document.querySelector('smart-editor');
const attributes = el.iframeSettings[0].attributes;

          enabledEnables/Disables the usage of an iframe for the content of the Editor.boolean

          Enables/Disables the usage of an iframe for the content of the Editor.

          Default value

          false

          Back to root property: iframeSettings

          Try a demo showcasing the enabled property.

          Read the nested value:

          const el = document.querySelector('smart-editor');
const enabled = el.iframeSettings[0].enabled;

          resourcesDetermines the resources like scripts/styles that will be imported into the iframe. Here's how to define resources: 
          resources: { 'style': { href: 'styles.css' }, 'script': { src: 'index.js', type: 'module' }}
          string

          Determines the resources like scripts/styles that will be imported into the iframe. Here's how to define resources: 

          resources: { 'style': { href: 'styles.css' }, 'script': { src: 'index.js', type: 'module' }}

          Default value

          "portrait"

          Back to root property: iframeSettings

          Try a demo showcasing the resources property.

          Read the nested value:

          const el = document.querySelector('smart-editor');
const resources = el.iframeSettings[0].resources;

          imageFormatSpecifies the file format for images or videos uploaded from local storage. By default, uploaded files are encoded and stored as base64 strings. This setting allows you to define or change the storage format as needed."base64" | "blob"

          Specifies the file format for images or videos uploaded from local storage. By default, uploaded files are encoded and stored as base64 strings. This setting allows you to define or change the storage format as needed.

          Allowed Values

          • "base64" - Images/videos are stored as base64.
          • "blob" - Images/videos are stored as blob.

          Default value

          "base64"

          Examples

          Markup and runtime examples for imageFormat:

          HTML:

          <smart-editor image-format="blob"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.imageFormat = "base64";

          Read the current value:

          const el = document.querySelector('smart-editor');
const imageFormat = el.imageFormat;

          imagePasteHeightAutomatically detects and sets the appropriate height for an image when it is pasted from the clipboard, ensuring correct aspect ratio and consistent display within the application.number

          Automatically detects and sets the appropriate height for an image when it is pasted from the clipboard, ensuring correct aspect ratio and consistent display within the application.

          Default value

          0

          Examples

          Markup and runtime examples for imagePasteHeight:

          HTML:

          <smart-editor image-paste-height="0"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.imagePasteHeight = 200;

          Read the current value:

          const el = document.querySelector('smart-editor');
const imagePasteHeight = el.imagePasteHeight;

          imagePasteWidthAutomatically detects and sets the appropriate width for images pasted from the clipboard, ensuring consistent image display and optimal fit within the layout.number

          Automatically detects and sets the appropriate width for images pasted from the clipboard, ensuring consistent image display and optimal fit within the layout.

          Default value

          0

          Examples

          Markup and runtime examples for imagePasteWidth:

          HTML:

          <smart-editor image-paste-width="0"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.imagePasteWidth = 200;

          Read the current value:

          const el = document.querySelector('smart-editor');
const imagePasteWidth = el.imagePasteWidth;

          inlineToolbarOffsetSpecifies the horizontal (x) and vertical (y) offset values used to adjust the position of the Inline Toolbar relative to its default placement on the page. This allows for precise positioning by shifting the toolbar along the x and y axes.number[]

          Specifies the horizontal (x) and vertical (y) offset values used to adjust the position of the Inline Toolbar relative to its default placement on the page. This allows for precise positioning by shifting the toolbar along the x and y axes.

          Default value

          [0, -5]

          Examples

          Markup and runtime examples for inlineToolbarOffset:

          HTML:

          <smart-editor inline-toolbar-offset="[0, 0]"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.inlineToolbarOffset = [0, -10];

          Read the current value:

          const el = document.querySelector('smart-editor');
const inlineToolbarOffset = el.inlineToolbarOffset;

          innerHTMLSets the content of the Editor using an HTML string. This method enables you to programmatically insert both plain text and HTML elements, including tags, formatting, and embedded media, directly into the Editor. Existing content will be replaced by the provided HTML. Use this to dynamically update the Editor's contents with custom HTML markup.string

          Sets the content of the Editor using an HTML string. This method enables you to programmatically insert both plain text and HTML elements, including tags, formatting, and embedded media, directly into the Editor. Existing content will be replaced by the provided HTML. Use this to dynamically update the Editor's contents with custom HTML markup.

          Default value

          "en"
          Try a demo showcasing the innerHTML property.

          Examples

          Markup and runtime examples for innerHTML:

          HTML:

          <smart-editor inner-h-t-m-l="
          New Content added
          "></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.innerHTML = "Some Other text then ...";

          Read the current value:

          const el = document.querySelector('smart-editor');
const innerHTML = el.innerHTML;

          localeSpecifies the current language code used for localization, such as "en" for English or "fr" for French. This property works together with the messages property to display the appropriate localized messages based on the selected language. Use it to get or set the active language for your application's interface.string

          Specifies the current language code used for localization, such as "en" for English or "fr" for French. This property works together with the messages property to display the appropriate localized messages based on the selected language. Use it to get or set the active language for your application's interface.

          Default value

          "en"
          Try a demo showcasing the locale property.

          Examples

          Markup and runtime examples for locale:

          HTML:

          <smart-editor locale="de"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.locale = "fr";

          Read the current value:

          const el = document.querySelector('smart-editor');
const locale = el.locale;

          maxCharCountSpecifies the maximum number of characters that can be entered within the Editor. Once this limit is reached, users will be unable to input additional characters.number

          Specifies the maximum number of characters that can be entered within the Editor. Once this limit is reached, users will be unable to input additional characters.

          Try a demo showcasing the maxCharCount property.

          Examples

          Markup and runtime examples for maxCharCount:

          HTML:

          <smart-editor max-char-count="1000"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.maxCharCount = 2000;

          Read the current value:

          const el = document.querySelector('smart-editor');
const maxCharCount = el.maxCharCount;

          messagesDefines or retrieves an object containing all user-visible strings (such as labels, tooltips, and messages) used by the widget for display purposes and localization. This property works together with the language setting to enable customization and translation of the widget’s interface into different languages. The object allows developers to provide localized string values, ensuring the widget content is appropriately translated for end users.object

          Defines or retrieves an object containing all user-visible strings (such as labels, tooltips, and messages) used by the widget for display purposes and localization. This property works together with the language setting to enable customization and translation of the widget’s interface into different languages. The object allows developers to provide localized string values, ensuring the widget content is appropriately translated for end users.

          Default value




          "en": {

          "propertyUnknownName": "Invalid property name: '{{name}}'!",

          "propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

          "propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: '{{actualValue}}', Expected value: '{{value}}'!",

          "propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",

          "methodInvalidValueType": "Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!",

          "methodInvalidArgumentsCount": "Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!",

          "methodInvalidReturnType": "Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",

          "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

          "moduleUndefined": "Module is undefined.",

          "missingReference": "{{elementType}}: Missing reference to '{{files}}'.",

          "htmlTemplateNotSuported": "{{elementType}}: Web Browser doesn't support HTMLTemplate elements.",

          "invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

          "invalidValue": "{{elementType}}: Invalid {{property}} value. {{property}} should be of type {{typeOne}} or {{typeTwo}}.",

          "incorrectArgument": "{{elementType}}: Incorrect argument {{argumentName}} in method {{methodName}}.",

          "permissionsRequired": "{{elementType}}: Permissions are required for the following action {{actionName}}.",

          "timeout": "{{elementType}}: The import request has timed out.",

          "importError": "{{elementType}}: The import request errored with the following status: {{status}}.",

          "exportError": "{{elementType}}: The Export request errored with the following status: {{status}}.",

          "ok": "Ok",

          "cancel": "Cancel",

          "alignLeft": "Align Left",

          "alignCenter": "Align Center",

          "alignRight": "Align Right",

          "alignJustify": "Align Justify",

          "segoeUi": "Segoe UI",

          "arial": "Arial",

          "georgia": "Georgia",

          "impact": "Impact",

          "tahoma": "Tahoma",

          "timesNewRoman": "Times New Roman",

          "verdana": "Verdana",

          "p": "Paragraph",

          "pre": "Code",

          "code": "Code",

          "blockquote": "Quotation",

          "h1": "Heading 1",

          "h2": "Heading 2",

          "h3": "Heading 3",

          "h4": "Heading 4",

          "h5": "Heading 5",

          "h6": "Heading 6",

          "bold": "Bold",

          "italic": "Italic",

          "underline": "Underline",

          "strikethrough": "Strikethrough",

          "orderedlist": "Ordered List",

          "unorderedlist": "Unordered List",

          "subscript": "Subscript",

          "superscript": "Superscript",

          "alignment": "Alignments",

          "fontname": "Font Name",

          "fontsize": "Font Size",

          "formats": "Formats",

          "backgroundcolor": "Background Color",

          "fontcolor": "Font Color",

          "redo": "Redo",

          "undo": "Undo",

          "indent": "Indent",

          "outdent": "Outdent",

          "createlink": "Hyperlink",

          "hyperlink": "Hyperlink",

          "editlink": "Hyperlink",

          "removelink": "Remove link",

          "openlink": "Open link",

          "image": "Image",

          "video": "Video",

          "table": "Table",

          "lowercase": "Lower Case",

          "uppercase": "Upper Case",

          "print": " Print",

          "cut": " Cut",

          "copy": " Copy",

          "paste": " Paste",

          "clearformat": "Clear Format",

          "fullscreen": "Full Screen",

          "restore": "Restore Screen",

          "sourcecode": "Source Code",

          "preview": "Preview",

          "splitmode": "Split Editor",

          "address": "Web Address",

          "text": "Display Text",

          "addressPlaceholder": "http://example.com",

          "textPlaceholder": "Enter Text",

          "targetPlaceholder": "Select Target",

          "titlePlaceholder": "Enter a Title",

          "urlPlaceholder": "http://example.com/image.png",

          "srcPlaceholder": "https://www.youtube.com/embed/video_link",

          "thumbnail": "Or provide a URL as a video thumbnail",

          "thumbnailPlaceholder": "https://www.link-to-thumbnail.jpg",

          "videoUrl": "Video URL",

          "videoUrlPlaceholder": "https://www.youtube.com/video_link",

          "captionPlaceholder": "Caption",

          "altPlaceholder": "Alternative Text",

          "widthPlaceholder": "auto",

          "heightPlaceholder": "auto",

          "target": "Open Link in",

          "linkBlankDescr": "New Window",

          "linkSelfDescr": "Same Window",

          "linkParentDescr": "Parent Frame",

          "linkTopDescr": "Full Body of the Window",

          "linkCustomDescr": "Custom Frame Name",

          "title": "Title",

          "url": "Or provide the URL to an image",

          "src": "Or provide the URL to an embed video",

          "width": "Width",

          "height": "Height",

          "alt": "Alternative Text",

          "caption": "Caption",

          "display": "Display",

          "displayPlaceholder": "Display",

          "displayBlock": "Block",

          "displayInline": "Inline",

          "draggable": "Enable Dragging",

          "resizable": "Enable Resizing",

          "browse": "Browse",

          "connectionError": "{{elementType}}: File Upload requires connection to the server.",

          "wrongItemIndex": "{{elementType}}: There is no file with such an index in the list of uploaded files.",

          "tooLongFileName": "{{elementType}}: File name is too long.",

          "totalFiles": "Total files: ",

          "cancelFile": "Cancel File",

          "dashedborders": "Dashed Borders",

          "altrows": "Alternate Rows",

          "insertRowBefore": "Insert Row Before",

          "insertRowAfter": "Insert Row After",

          "deleteRow": "Delete Row",

          "insertColumnLeft": "Insert Column Left",

          "insertColumnRight": "Insert Column Right",

          "deleteColumn": "Delete Column",

          "alignTop": "Align Top",

          "alignMiddle": "Align Middle",

          "alignBottom": "Align Bottom",

          "delete": "Delete",

          "tablerows": "Table Rows",

          "tablecolumns": "Table Columns",

          "tablevalign": "Table Cell Vertical Align",

          "tablestyle": "Table Style",

          "tableheader": "Table Header",

          "buttonLabel": "Custom Table",

          "pasteLabel": "Choose the paste format action:",

          "cols": "Columns",

          "rows": "Rows",

          "alphabet": "abcdefghijklmnopqrstuvwxyz",

          "header": "Header",

          "column": "Column",

          "plainText": "Plain Text",

          "keepFormat": "Keep Format",

          "cleanFormat": "Clean Format",

          "roleDescription": "Text Editor",

          "iframeTitle": "Editor Content is Encloused in it's own DOM inside an iFrame",

          "toolbarButtonAriaLabel": "Toolbar Toggle Button",

          "primaryToolbarAriaLabel": "Primary Toolbar",

          "secondaryToolbarAriaLabel": "Secondary Toolbar",

          "inputAriaLabel": "Enter Text",

          "homeTab": "Home",

          "viewTab": "View",

          "insertTab": "Insert",

          "layoutTab": "Layout",

          "undoGroup": "Undo",

          "clipboardGroup": "Clipboard",

          "fontGroup": "Font",

          "paragraphGroup": "Paragraph",

          "editingGroup": "Editing",

          "tableGroup": "Tables",

          "imageGroup": "Images",

          "videoGroup": "Videos",

          "linkGroup": "Links",

          "viewsGroup": "Views",

          "deleteGroup": "Delete",

          "findandreplace": "Find and Replace",

          "requiredMessage": "The content of the Editor cannot be empty",

          "tableProperties": "Table Properties",

          "imageProperties": "Image Properties",

          "videoProperties": "Video Properties",

          "linkProperties": "Link Properties",

          "selectAll": "Select All",

          "deleteTable": "Delete Table",

          "deleteImage": "Delete Image",

          "deleteVideo": "Delete Video",

          "createLink": "Create Link",

          "deleteLink": "Delete Link",

          "copyImage": "Copy",

          "cutImage": "Cut",

          "copyVideo": "Copy",

          "cutVideo": "Cut",

          "find": "Find",

          "findPlaceholder": "",

          "replace": "Replace",

          "replaceWith": "Replace With",

          "replaceAll": "Replace All",

          "replacePlaceholder": "",

          "results": "Results",

          "resultsPlaceholder": "No match",

          "matchCase": "Match Case",

          "searchPlaceholder": "Search..."

          }

          Try a demo showcasing the messages property.

          Examples

          Markup and runtime examples for messages:

          HTML:

          <smart-editor messages="{"de":{"invalidValue":"{{elementType}}: Ungültiger {{property}} Wert. {{property}} sollte vom Typ {{typeOne}} oder {{typeTwo}} sein.","incorrectArgument":"{{elementType}}: Falsches Argument {{argumentName}} in Methode {{methodName}}.","permissionsRequired":"{{elementType}}: Für die folgende Aktion {{actionName}} sind Berechtigungen erforderlich.","ok":"Ok","cancel":"Stornieren","alignLeft":"Linksbündig","alignCenter":"Im Zentrum anordnen","alignRight":"Rechts ausrichten","alignJustify":"Ausrichten Ausrichten","segoeUi":"Segoe UI","arial":"Arial","georgia":"Georgia","impact":"Impact","tahoma":"Tahoma","timesNewRoman":"Times New Roman","verdana":"Verdana","p":"Absatz","pre":"Code","code":"Code","blockquote":"Zitat","h1":"Überschrift 1","h2":"Überschrift 2","h3":"Überschrift 3","h4":"Überschrift 4","h5":"Überschrift 5","h6":"Überschrift 6","bold":"Fett gedruckt","italic":"Kursiv","underline":"Unterstreichen","strikethrough":"Durchgestrichen","orderedlist":"Bestellliste","unorderedlist":"Ungeordnete Liste","subscript":"Index","superscript":"Superscript","alignment":"Ausrichtungen","fontname":"Schriftartenname","fontsize":"Schriftgröße","formats":"Formate","backgroundcolor":"Hintergrundfarbe","fontcolor":"Schriftfarbe","redo":"Wiederholen","undo":"Rückgängig machen","indent":"Einzug","outdent":"Outdent","createlink":"Hyperlink","hyperlink":"Hyperlink","editlink":"Hyperlink","removelink":"Link entfernen","openlink":"Verbindung öffnen","image":"Bild","table":"Tabelle","lowercase":"Kleinbuchstaben","uppercase":"Großbuchstaben","print":"Drucken","cut":"Schnitt","copy":"Kopieren","paste":" Einfügen","clearformat":"Format löschen","fullscreen":"Vollbild","restore":"Bildschirm wiederherstellen","sourcecode":"Quellcode","preview":"Vorschau","splitmode":"Geteilter Editor","address":"Webadresse","text":"Text anzeigen","addressPlaceholder":"http://example.com","textPlaceholder":"Text eingeben","targetPlaceholder":"Ziel auswählen","titlePlaceholder":"Geben Sie einen Titel ein","urlPlaceholder":"http://example.com/image.png","captionPlaceholder":"Bildbeschriftung","altPlaceholder":"alternativer Text","widthPlaceholder":"auto","heightPlaceholder":"auto","target":"Öffnen Sie den Link in","linkBlankDescr":"Neues Fenster","linkSelfDescr":"Gleiches Fenster","linkParentDescr":"Übergeordneter Rahmen","linkTopDescr":"Ganzkörper des Fensters","linkCustomDescr":"Benutzerdefinierter Frame-Name","title":"Titel","url":"Sie können auch die URL zu einem Bild angeben","width":"Breite","height":"Höhe","alt":"alternativer Text","caption":"Bildbeschriftung","display":"Anzeige","displayPlaceholder":"Anzeige","displayBlock":"Block","displayInline":"Im Einklang","draggable":"Aktivieren Sie das Ziehen","resizable":"Aktivieren Sie die Größenänderung","browse":"Durchsuche","connectionError":"{{elementType}}: Für das Hochladen von Dateien ist eine Verbindung zum Server erforderlich.","wrongItemIndex":"{{elementType}}: Die Liste der hochgeladenen Dateien enthält keine Datei mit einem solchen Index.","tooLongFileName":"{{elementType}}: Der Dateiname ist zu lang.","totalFiles":"Gesamtzahl der Dateien: ","cancelFile":"Datei abbrechen","dashedborders":"Gestrichelte Grenzen","altrows":"Alternative Zeilen","insertRowBefore":"Zeile vor einfügen","insertRowAfter":"Zeile nach einfügen","deleteRow":"Zeile löschen","insertColumnLeft":"Spalte links einfügen","insertColumnRight":"Spalte rechts einfügen","deleteColumn":"Spalte löschen","alignTop":"Oben ausrichten","alignMiddle":"Mitte ausrichten","alignBottom":"Unten ausrichten","delete":"Löschen","tablerows":"Tabellenzeilen","tablecolumns":"Tabellenspalten","tablevalign":"Vertikale Ausrichtung der Tabellenzelle","tablestyle":"Tischstil","tableheader":"Tabellenüberschrift","buttonLabel":"Benutzerdefinierte Tabelle","pasteLabel":"Wählen Sie die Aktion zum Einfügen des Formats:","cols":"Säulen","rows":"Reihen","alphabet":"abcdefghijklmnopqrstuvwxyz","header":"Header","column":"Säule","plainText":"Klartext","keepFormat":"Format beibehalten","cleanFormat":"Format bereinigen","roleDescription":"Texteditor","iframeTitle":"Der Inhalt des Editors befindet sich in einem eigenen DOM in einem iFrame","toolbarButtonAriaLabel":"Symbolleisten-Umschalttaste","primaryToolbarAriaLabel":"Primäre Symbolleiste","secondaryToolbarAriaLabel":"Sekundäre Symbolleiste","inputAriaLabel":"Text eingeben", "requiredMessage":"Der Inhalt des Editors darf nicht leer sein"}}"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.messages = {"it":{"invalidValue":"{{elementType}}: valore {{property}} non valido. {{property}} deve essere di tipo {{typeOne}} o {{typeTwo}}.","incorrectArgument":"{{elementType}}: argomento {{topicName}} non corretto nel metodo {{methodName}}.","permissionsRequired":"{{elementType}}: sono necessarie autorizzazioni per la seguente azione {{actionName}}.","ok":"Ok","cancel":"Annulla","alignLeft":"Allineare a sinistra","alignCenter":"Allinea al centro","alignRight":"Allinea a destra","alignJustify":"Allinea Giustifica","segoeUi":"Segoe UI","arial":"Arial","georgia":"Georgia","impact":"Impact","tahoma":"Tahoma","timesNewRoman":"Times New Roman","verdana":"Verdana","p":"Paragrafo","pre":"Codice","code":"Codice","blockquote":"Quotazione","h1":"Intestazione 1","h2":"Intestazione 2","h3":"Intestazione 3","h4":"Intestazione 4","h5":"Intestazione 5","h6":"Intestazione 6","bold":"Grassetto","italic":"Corsivo","underline":"Sottolineare","strikethrough":"Barrato","orderedlist":"Lista ordinata","unorderedlist":"Lista non ordinata","subscript":"Pedice","superscript":"Apice","alignment":"Allineamenti","fontname":"Nome carattere","fontsize":"Dimensione del font","formats":"Formati","backgroundcolor":"Colore di sfondo","fontcolor":"Colore del carattere","redo":"Rifare","undo":"Disfare","indent":"Rientro","outdent":"Outdent","createlink":"Collegamento ipertestuale","hyperlink":"Collegamento ipertestuale","editlink":"Collegamento ipertestuale","removelink":"Rimuovi collegamento","openlink":"Link aperto","image":"Immagine","table":"Tavolo","lowercase":"Case inferiore","uppercase":"Maiuscolo","print":"Stampa","cut":"Taglio","copy":"Copia","paste":"Incolla","clearformat":"Cancella formato","fullscreen":"A schermo intero","restore":"Ripristina schermo","sourcecode":"Codice sorgente","preview":"Anteprima","splitmode":"Editor diviso","address":"Indirizzo Web","text":"Visualizza testo","addressPlaceholder":"http://example.com","textPlaceholder":"Inserire il testo","targetPlaceholder":"Seleziona Target","titlePlaceholder":"Immettere un titolo","urlPlaceholder":"http://example.com/image.png","captionPlaceholder":"Didascalia","altPlaceholder":"Testo alternativo","widthPlaceholder":"auto","heightPlaceholder":"auto","target":"Apri collegamento in","linkBlankDescr":"Nuova finestra","linkSelfDescr":"Stessa finestra","linkParentDescr":"Frame genitore","linkTopDescr":"Tutto il corpo della finestra","linkCustomDescr":"Nome frame personalizzato","title":"Titolo","url":"Puoi anche fornire l'URL a un'immagine","width":"Larghezza","height":"Altezza","alt":"Testo alternativo","caption":"Didascalia","display":"Schermo","displayPlaceholder":"Schermo","displayBlock":"Bloccare","displayInline":"In linea","draggable":"Abilita il trascinamento","resizable":"Abilita ridimensionamento","browse":"Navigare","connectionError":"{{elementType}}: il caricamento del file richiede la connessione al server.","wrongItemIndex":"{{elementType}}: non è presente alcun file con tale indice nell'elenco dei file caricati.","tooLongFileName":"{{elementType}}: il nome del file è troppo lungo.","totalFiles":"File totali: ","cancelFile":"Annulla file","dashedborders":"Bordi tratteggiati","altrows":"Righe alternative","insertRowBefore":"Inserisci riga prima","insertRowAfter":"Inserisci riga dopo","deleteRow":"Elimina riga","insertColumnLeft":"Inserisci colonna a sinistra","insertColumnRight":"Inserisci colonna a destra","deleteColumn":"Elimina colonna","alignTop":"Allinea in alto","alignMiddle":"Allinea al centro","alignBottom":"Allinea in basso","delete":"Elimina","tablerows":"Righe tabella","tablecolumns":"Colonne della tabella","tablevalign":"Allineamento verticale delle celle della tabella","tablestyle":"Stile tavolo","tableheader":"Intestazione tabella","buttonLabel":"Tabella personalizzata","pasteLabel":"Scegli l'azione di formato Incolla:","cols":"Colonne","rows":"Righe","alphabet":"abcdefghijklmnopqrstuvwxyz","header":"Intestazione","column":"Colonna","plainText":"Testo normale","keepFormat":"Mantieni formato","cleanFormat":"Formato pulito","roleDescription":"Editor di testo","iframeTitle":"Il contenuto dell'editor è racchiuso nel proprio DOM all'interno di un iFrame","toolbarButtonAriaLabel":"Pulsante di attivazione","primaryToolbarAriaLabel":"Barra degli strumenti principale","secondaryToolbarAriaLabel":"Barra degli strumenti secondaria","inputAriaLabel":"Inserire il testo", "requiredMessage":"Il contenuto dell'Editor non può essere vuoto"}};

          Read the current value:

          const el = document.querySelector('smart-editor');
const messages = el.messages;

          nameAssigns the specified element to the property †a†, designating it as the form control responsible for submitting the Editor's value. This allows the Editor’s content to be included in form submissions, ensuring its data is sent when the form is submitted.string | null

          Assigns the specified element to the property †a†, designating it as the form control responsible for submitting the Editor's value. This allows the Editor’s content to be included in form submissions, ensuring its data is sent when the form is submitted.

          Try a demo showcasing the name property.

          Examples

          Markup and runtime examples for name:

          HTML:

          <smart-editor name="myEditor"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.name = "smartEditor";

          Read the current value:

          const el = document.querySelector('smart-editor');
const name = el.name;

          pagesDefines the editor pages by accepting an array of objects, where each object must include a 'label' property (a string representing the title or name of the page) and an 'innerHTML' property (a string containing the HTML content to be displayed on that page).[]

          Defines the editor pages by accepting an array of objects, where each object must include a 'label' property (a string representing the title or name of the page) and an 'innerHTML' property (a string containing the HTML content to be displayed on that page).

          Default value

          []
          Try a demo showcasing the pages property.

          Examples

          Markup and runtime examples for pages:

          HTML:

          <smart-editor pages="[]"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.pages = [];

          Read the current value:

          const el = document.querySelector('smart-editor');
const pages = el.pages;

          pasteFormatSpecifies the format (such as plain text, HTML, or Markdown) in which content will be inserted into the Editor when a user pastes data, ensuring consistent formatting and correct rendering within the editing environment."prompt" | "plainText" | "keepFormat" | "cleanFormat"

          Specifies the format (such as plain text, HTML, or Markdown) in which content will be inserted into the Editor when a user pastes data, ensuring consistent formatting and correct rendering within the editing environment.

          Allowed Values

          • "prompt" - Prompts the user with a Dialog Window to choose the pasting format before the action is executed.
          • "plainText" - Pastes the copied content as plain text.
          • "keepFormat" - Pastes the copied content by keeping the format intact.
          • "cleanFormat" - Pastes the copied content by removing any formatting.

          Default value

          "keepFormat"
          Try a demo showcasing the pasteFormat property.

          Examples

          Markup and runtime examples for pasteFormat:

          HTML:

          <smart-editor paste-format="prompt"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.pasteFormat = "plainText";

          Read the current value:

          const el = document.querySelector('smart-editor');
const pasteFormat = el.pasteFormat;

          placeholderSpecifies the placeholder text or element displayed within the Editor when it is empty, guiding users on what to enter or indicating the expected content.string

          Specifies the placeholder text or element displayed within the Editor when it is empty, guiding users on what to enter or indicating the expected content.

          Default value

          ""
          Try a demo showcasing the placeholder property.

          Examples

          Markup and runtime examples for placeholder:

          HTML:

          <smart-editor placeholder="Please Enter ..."></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.placeholder = "Waiting for input...";

          Read the current value:

          const el = document.querySelector('smart-editor');
const placeholder = el.placeholder;

          removeStylesOnClearFormatSpecifies whether activating the clearFormat toolbar action should also remove any inline CSS styles (such as style attributes) applied to the currently selected node. When enabled, this option ensures that in addition to removing formatting tags (like <b>, <i>, etc.), all custom inline styles will be cleared from the selected content.boolean

          Specifies whether activating the clearFormat toolbar action should also remove any inline CSS styles (such as style attributes) applied to the currently selected node. When enabled, this option ensures that in addition to removing formatting tags (like <b>, <i>, etc.), all custom inline styles will be cleared from the selected content.

          Default value

          false

          Examples

          Markup and runtime examples for removeStylesOnClearFormat:

          HTML attribute:

          <smart-editor remove-styles-on-clear-format></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.removeStylesOnClearFormat = false;

          Read the current value:

          const el = document.querySelector('smart-editor');
const removeStylesOnClearFormat = el.removeStylesOnClearFormat;

          removeUrlDefines or retrieves the URL used for the remove operation. This property corresponds to the form's action attribute and specifies the server endpoint that will handle item removal requests. For example, setting the removeUrl property to the path of a PHP file enables the server-side script to process and execute the removal action when triggered.string

          Defines or retrieves the URL used for the remove operation. This property corresponds to the form's action attribute and specifies the server endpoint that will handle item removal requests. For example, setting the removeUrl property to the path of a PHP file enables the server-side script to process and execute the removal action when triggered.

          Default value

          ""

          Examples

          Markup and runtime examples for removeUrl:

          HTML:

          <smart-editor remove-url="localhost"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.removeUrl = "localhost/fileUpload";

          Read the current value:

          const el = document.querySelector('smart-editor');
const removeUrl = el.removeUrl;

          requiredSpecifies whether the Editor's content is required. If this option is enabled and the Editor is left empty, a notification will be displayed indicating that the content cannot be empty and must be provided before proceeding.boolean

          Specifies whether the Editor's content is required. If this option is enabled and the Editor is left empty, a notification will be displayed indicating that the content cannot be empty and must be provided before proceeding.

          Default value

          false
          Try a demo showcasing the required property.

          Examples

          Markup and runtime examples for required:

          HTML attribute:

          <smart-editor required></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.required = false;

          Read the current value:

          const el = document.querySelector('smart-editor');
const required = el.required;

          rightToLeftSets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures that the element displays its content in a manner appropriate for RTL locale support.boolean

          Sets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures that the element displays its content in a manner appropriate for RTL locale support.

          Default value

          false
          Try a demo showcasing the rightToLeft property.

          Examples

          Markup and runtime examples for rightToLeft:

          HTML attribute:

          <smart-editor right-to-left></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.rightToLeft = false;

          Read the current value:

          const el = document.querySelector('smart-editor');
const rightToLeft = el.rightToLeft;

          sanitizedIndicates whether the value is sanitized to protect against Cross-Site Scripting (XSS) attacks. When enabled, any potentially malicious scripts, inline event handlers, or other XSS vulnerabilities are automatically removed from the HTML content entered in the Editor, ensuring only safe and clean HTML is allowed.boolean

          Indicates whether the value is sanitized to protect against Cross-Site Scripting (XSS) attacks. When enabled, any potentially malicious scripts, inline event handlers, or other XSS vulnerabilities are automatically removed from the HTML content entered in the Editor, ensuring only safe and clean HTML is allowed.

          Default value

          false
          Try a demo showcasing the sanitized property.

          Examples

          Markup and runtime examples for sanitized:

          HTML attribute:

          <smart-editor sanitized></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.sanitized = false;

          Read the current value:

          const el = document.querySelector('smart-editor');
const sanitized = el.sanitized;

          showCharCountControls the visibility of the character counter. When enabled, the counter appears in the bottom right corner of the input field. If a maxCharCount value is set, the counter changes color to visually warn the user as they approach the character limit:- When the content length reaches 70% or more of the maximum, the counter displays a warning color.- At 90% or more of the maximum, the counter switches to a more prominent warning color, indicating that the limit is nearly reached.- Once the character count reaches the maximum limit, further text input is prevented.boolean

          Controls the visibility of the character counter. When enabled, the counter appears in the bottom right corner of the input field. If a maxCharCount value is set, the counter changes color to visually warn the user as they approach the character limit:

          - When the content length reaches 70% or more of the maximum, the counter displays a warning color.
          - At 90% or more of the maximum, the counter switches to a more prominent warning color, indicating that the limit is nearly reached.
          - Once the character count reaches the maximum limit, further text input is prevented.

          Default value

          false
          Try a demo showcasing the showCharCount property.

          Examples

          Markup and runtime examples for showCharCount:

          HTML attribute:

          <smart-editor show-char-count></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.showCharCount = true;

          Read the current value:

          const el = document.querySelector('smart-editor');
const showCharCount = el.showCharCount;

          spellCheckSpecifies if the editor enables spell checking, allowing the identification and highlighting of spelling errors within the text. If set to true, the editor will actively check and mark misspelled words as the user types. If set to false, spell checking functionality will be disabled.boolean

          Specifies if the editor enables spell checking, allowing the identification and highlighting of spelling errors within the text. If set to true, the editor will actively check and mark misspelled words as the user types. If set to false, spell checking functionality will be disabled.

          Default value

          true
          Try a demo showcasing the spellCheck property.

          Examples

          Markup and runtime examples for spellCheck:

          HTML attribute:

          <smart-editor spell-check></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.spellCheck = true;

          Read the current value:

          const el = document.querySelector('smart-editor');
const spellCheck = el.spellCheck;

          splitModeRefreshTimeoutSpecifies the time interval, in milliseconds, at which the Source Code and Preview panels are automatically refreshed when Split Mode is active. Adjusting this value controls how frequently the panels update to reflect changes in real-time while Split Mode is enabled.number

          Specifies the time interval, in milliseconds, at which the Source Code and Preview panels are automatically refreshed when Split Mode is active. Adjusting this value controls how frequently the panels update to reflect changes in real-time while Split Mode is enabled.

          Default value

          100

          Examples

          Markup and runtime examples for splitModeRefreshTimeout:

          HTML:

          <smart-editor split-mode-refresh-timeout="500"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.splitModeRefreshTimeout = 50;

          Read the current value:

          const el = document.querySelector('smart-editor');
const splitModeRefreshTimeout = el.splitModeRefreshTimeout;

          themeSpecifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.string

          Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.

          Default value

          ""

          Examples

          Markup and runtime examples for theme:

          HTML:

          <smart-editor theme="blue"></smart-editor>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-editor');
el.theme = "red";

          Read the current value:

          const el = document.querySelector('smart-editor');
const theme = el.theme;

          toolbarItems'Provides the configuration for the Toolbar items in the editor.' The value can be either an array of strings—where each string specifies the name of a default toolbar item—or an array of objects for more advanced configuration and customization. - 'String Values:' Each string refers to a toolbar item by its name. Names are case-insensitive.- 'Object Values:' An object can define a custom toolbar item, or modify/add settings to an existing one. - The object must include a 'name' property (case-insensitive) to refer to a default toolbar item’s functionality. - If 'name' is set to "custom", you can define a fully custom toolbar item. - If the 'name' attribute is missing or invalid, the entry is treated as a separator rather than a toolbar item.'Supported Default Toolbar Items' Below is a list of default toolbar items supported by the editor, along with their descriptions and types: - 'SourceCode': Toggles between the HTML source/preview panel and the input panel. *Type: Toggle button*- 'SplitMode': Splits the editor view to show both input and preview panels. *Type: Toggle button*- 'FullScreen': Expands the editor to fill the viewport, overlaying the page content. *Type: Toggle button*- 'Alignment': Controls the alignment (left, center, right, justify) of the selected content. *Type: Dropdown*- 'FontName': Sets the font family of the selected content. *Type: Dropdown*- 'FontSize': Sets the font size of the selected content. *Type: Dropdown*- 'Formats': Changes the format/style of the current selection (e.g., paragraph, heading). *Type: Dropdown*- 'TableRows': Insert or remove table rows in the selected table. *Type: Dropdown*- 'TableColumns': Insert or remove table columns in the selected table. *Type: Dropdown*- 'TableVAlign': Sets vertical alignment of a selected table cell. *Type: Dropdown*- 'TableStyle': Applies additional styling to the selected table. *Type: Dropdown*- 'BackgroundColor': Changes the background color of the current selection. *Type: Color input*- 'FontColor': Changes the font color of the current selection. *Type: Color input*- 'Bold': Toggles bold for the selected text. *Type: Button*- 'Italic': Toggles italic for the selected text. *Type: Button*- 'Underline': Toggles underline for the selected text. *Type: Button*- 'Strikethrough': Toggles strikethrough for the selected text. *Type: Button*- 'Delete': Deletes the current selection. *Type: Button*- 'Undo': Reverts the last operation. *Type: Button*- 'Redo': Redoes the previously undone operation. *Type: Button*- 'Indent': Increases the indentation of the current selection. *Type: Button*- 'Outdent': Decreases the indentation of the current selection. *Type: Button*- 'OpenLink': Opens the hyperlink of the current selection. *Type: Button*- 'EditLink', 'CreateLink', 'Hyperlink': Creates, edits, or triggers a dialog for hyperlink management. *Type: Button*- 'RemoveLink': Removes a hyperlink from the selected text. *Type: Button*- 'Cut': Cuts the selected content. *Type: Button*- 'Copy': Copies the selected content. *Type: Button*- 'Paste': Pastes from the clipboard. - *Type: Button* - *Type: Dropdown* (when the "advanced" property is set to true)- 'Image': Opens a dialog to insert or edit an image. *Type: Button*- 'Video': Opens a dialog to insert or edit a video. *Type: Button*- 'LowerCase': Converts current selection to lowercase letters. *Type: Button*- 'UpperCase': Converts current selection to uppercase letters. *Type: Button*- 'Print': Opens the browser's print preview window. *Type: Button*- 'Caption': Inserts or removes a caption in the selected table. *Type: Button*- 'ClearFormat': Removes all formatting from the current selection. *Type: Button*- 'Table': Opens a dialog to insert a new table. *Type: Button*- 'TableHeader': Adds or removes a header row in the selected table. *Type: Button*- 'OrderedList': Inserts or removes an ordered (numbered) list. *Type: Button*- 'UnorderedList': Inserts or removes a bulleted list. *Type: Button*- 'Subscript': Formats the selected text as subscript. *Type: Button*- 'Superscript': Formats the selected text as superscript. *Type: Button*- 'FindAndReplace': Opens a dialog to find and replace text in the editor. *Type: Button*'Note:' Separators between toolbar items can be added by using an object without a valid 'name' property.---'inlineToolbarItems' - This property is applicable only for the following toolbar items: 'table', 'image', and 'hyperlink'.- Accepts the same value types and structure as 'toolbarItems'.- The specified items will be displayed in an inline floating toolbar when any of these elements is selected in the editor.---'Summary of Usage Examples:''''json[ "Bold", "Italic", { "name": "FontSize", "options": ["Small", "Medium", "Large"] }, {}, { "name": "custom", "label": "Custom Action", "icon": "..." }]'''- The above would provide bold and italic buttons, a dropdown with custom font size options, a separator, and a custom toolbar item.---This configuration enables full customization of the editor’s toolbar to suit different user requirements, offering both default and extendable options. Click for more details. Property object's options:
            string[] | { name?: string, disabled?: boolean, advanced?: boolean, dataSource?: string[] | object[], inlineToolbarItems?: string[] | ToolbarItem[], editor?: ToolbarItemEditor[], template?: function | string, width?: string | number }[]

            'Provides the configuration for the Toolbar items in the editor.'
            The value can be either an array of strings—where each string specifies the name of a default toolbar item—or an array of objects for more advanced configuration and customization.
            - 'String Values:'
            Each string refers to a toolbar item by its name. Names are case-insensitive.
            - 'Object Values:'
            An object can define a custom toolbar item, or modify/add settings to an existing one.
            - The object must include a 'name' property (case-insensitive) to refer to a default toolbar item’s functionality.
            - If 'name' is set to "custom", you can define a fully custom toolbar item.
            - If the 'name' attribute is missing or invalid, the entry is treated as a separator rather than a toolbar item.

            'Supported Default Toolbar Items'
            Below is a list of default toolbar items supported by the editor, along with their descriptions and types:
            - 'SourceCode': Toggles between the HTML source/preview panel and the input panel. *Type: Toggle button*
            - 'SplitMode': Splits the editor view to show both input and preview panels. *Type: Toggle button*
            - 'FullScreen': Expands the editor to fill the viewport, overlaying the page content. *Type: Toggle button*
            - 'Alignment': Controls the alignment (left, center, right, justify) of the selected content. *Type: Dropdown*
            - 'FontName': Sets the font family of the selected content. *Type: Dropdown*
            - 'FontSize': Sets the font size of the selected content. *Type: Dropdown*
            - 'Formats': Changes the format/style of the current selection (e.g., paragraph, heading). *Type: Dropdown*
            - 'TableRows': Insert or remove table rows in the selected table. *Type: Dropdown*
            - 'TableColumns': Insert or remove table columns in the selected table. *Type: Dropdown*
            - 'TableVAlign': Sets vertical alignment of a selected table cell. *Type: Dropdown*
            - 'TableStyle': Applies additional styling to the selected table. *Type: Dropdown*
            - 'BackgroundColor': Changes the background color of the current selection. *Type: Color input*
            - 'FontColor': Changes the font color of the current selection. *Type: Color input*
            - 'Bold': Toggles bold for the selected text. *Type: Button*
            - 'Italic': Toggles italic for the selected text. *Type: Button*
            - 'Underline': Toggles underline for the selected text. *Type: Button*
            - 'Strikethrough': Toggles strikethrough for the selected text. *Type: Button*
            - 'Delete': Deletes the current selection. *Type: Button*
            - 'Undo': Reverts the last operation. *Type: Button*
            - 'Redo': Redoes the previously undone operation. *Type: Button*
            - 'Indent': Increases the indentation of the current selection. *Type: Button*
            - 'Outdent': Decreases the indentation of the current selection. *Type: Button*
            - 'OpenLink': Opens the hyperlink of the current selection. *Type: Button*
            - 'EditLink', 'CreateLink', 'Hyperlink': Creates, edits, or triggers a dialog for hyperlink management. *Type: Button*
            - 'RemoveLink': Removes a hyperlink from the selected text. *Type: Button*
            - 'Cut': Cuts the selected content. *Type: Button*
            - 'Copy': Copies the selected content. *Type: Button*
            - 'Paste': Pastes from the clipboard.
            - *Type: Button*
            - *Type: Dropdown* (when the "advanced" property is set to true)
            - 'Image': Opens a dialog to insert or edit an image. *Type: Button*
            - 'Video': Opens a dialog to insert or edit a video. *Type: Button*
            - 'LowerCase': Converts current selection to lowercase letters. *Type: Button*
            - 'UpperCase': Converts current selection to uppercase letters. *Type: Button*
            - 'Print': Opens the browser's print preview window. *Type: Button*
            - 'Caption': Inserts or removes a caption in the selected table. *Type: Button*
            - 'ClearFormat': Removes all formatting from the current selection. *Type: Button*
            - 'Table': Opens a dialog to insert a new table. *Type: Button*
            - 'TableHeader': Adds or removes a header row in the selected table. *Type: Button*
            - 'OrderedList': Inserts or removes an ordered (numbered) list. *Type: Button*
            - 'UnorderedList': Inserts or removes a bulleted list. *Type: Button*
            - 'Subscript': Formats the selected text as subscript. *Type: Button*
            - 'Superscript': Formats the selected text as superscript. *Type: Button*
            - 'FindAndReplace': Opens a dialog to find and replace text in the editor. *Type: Button*

            'Note:' Separators between toolbar items can be added by using an object without a valid 'name' property.

            ---

            'inlineToolbarItems'
            - This property is applicable only for the following toolbar items: 'table', 'image', and 'hyperlink'.
            - Accepts the same value types and structure as 'toolbarItems'.
            - The specified items will be displayed in an inline floating toolbar when any of these elements is selected in the editor.

            ---

            'Summary of Usage Examples:'

            '''json
            [
            "Bold",
            "Italic",
            { "name": "FontSize", "options": ["Small", "Medium", "Large"] },
            {},
            { "name": "custom", "label": "Custom Action", "icon": "..." }
            ]
            '''
            - The above would provide bold and italic buttons, a dropdown with custom font size options, a separator, and a custom toolbar item.

            ---

            This configuration enables full customization of the editor’s toolbar to suit different user requirements, offering both default and extendable options.

            Properties

            nameThe unique name of the toolbar item. The list of all possible names is available in the description above.
            disabledDetermines whethet the item is disabled or not.
            advancedApplicable only to item 'paste'. Transforms the type of the Paste toolbar item to drop down list with paste format options.
            dataSourceAllows to set a different dataSource for the toolbar items of type 'drop-down' or 'color-input.
            inlineToolbarItemsDefines the list of toolbar items for the Inline Toolbar. Accept the same values as toolbarItems property.
            editorAllows to set predefined values for the Dialog Window of the following toolbar items: 'table', 'image', 'video', 'hyperlink'. Click for more details. Property object's options:
            • address:string | null - Allows to preset the value for the hyperlink address field in the Dialog Window.
            • target:string | null - Allows to preset the value for the hyperlink target field in the Dialog Window.
            • text:string | null - Allows to preset the value for the hyperlink text field in the Dialog Window.
            • title:string | null - Allows to preset the value for the hyperlink/image title field in the Dialog Window.
            • file:object - Allows to preset the value for the image/video file uploader in the Dialog Window.
            • alt:string | null - Allows to preset the value for the image/video alt field in the Dialog Window.
            • url:string | null - Allows to preset the value for the image/video url field in the Dialog Window.
            • width:string | number - Allows to preset the value for the image/table/video width field in the Dialog Window.
            • height:string | number - Allows to preset the value for the image/table/video height field in the Dialog Window.
            • caption:string | null - Allows to preset the value for the image/video caption field in the Dialog Window.
            • alignment:string | null - Allows to preset the value for the image/video alignment field in the Dialog Window.
            • display:string | null - Allows to preset the value for the image/video display field in the Dialog Window.
            • draggable:boolean | null - Allows to preset the value for the image draggable field in the Dialog Window.
            • resizable:boolean | null - Allows to preset the value for the image/table/video resizable field in the Dialog Window.
            • cols:number | string | null - Allows to preset the value for the table cols field in the Dialog Window.
            • rows:number | string | null - Allows to preset the value for the table rows field in the Dialog Window.
            • tableheader:boolean | null - Allows to preset the value for the table header field in the Dialog Window.
            • altrows:boolean | null - Allows to preset the value for the table altrows field in the Dialog Window.
            • dashedborders:boolean | null - Allows to preset the value for the table dashedborders field in the Dialog Window.
            templateAllows to set a template for a custom Toolbar item when the name attribute is set to 'custom'.
            widthDetermines the width of the toolbar item.
            Try a demo showcasing the toolbarItems property.

            Examples

            Markup and runtime examples for toolbarItems:

            HTML:

            <smart-editor toolbar-items="[ "bold",  "italic", "underline"]"></smart-editor>

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-editor');
el.toolbarItems = [ "hyperlink", "image", "table"];

            Read the current value:

            const el = document.querySelector('smart-editor');
const toolbarItems = el.toolbarItems;

            advancedApplicable only to item 'paste'. Transforms the type of the Paste toolbar item to drop down list with paste format options.boolean | null

            Applicable only to item 'paste'. Transforms the type of the Paste toolbar item to drop down list with paste format options.

            Default value

            false

            Back to root property: toolbarItems

            Try a demo showcasing the advanced property.

            Read the nested value:

            const el = document.querySelector('smart-editor');
const advanced = el.toolbarItems[0].advanced;

            dataSourceAllows to set a different dataSource for the toolbar items of type 'drop-down' or 'color-input. string[] | object[] | null

            Allows to set a different dataSource for the toolbar items of type 'drop-down' or 'color-input.

            Back to root property: toolbarItems

            Try a demo showcasing the dataSource property.

            Read the nested value:

            const el = document.querySelector('smart-editor');
const dataSource = el.toolbarItems[0].dataSource;

            disabledDetermines whethet the item is disabled or not.boolean | null

            Determines whethet the item is disabled or not.

            Default value

            false

            Back to root property: toolbarItems

            Try a demo showcasing the disabled property.

            Read the nested value:

            const el = document.querySelector('smart-editor');
const disabled = el.toolbarItems[0].disabled;

            editorAllows to set predefined values for the Dialog Window of the following toolbar items: 'table', 'image', 'video', 'hyperlink'. Click for more details. Property object's options:
               { address?: string, target?: string, text?: string, title?: string, file?: File, url?: string, alt?: string, width?: string | number, height?: string | number, caption?: string, alignment?: string, display?: string, draggable?: boolean, resizable?: boolean, rows?: number, cols?: number, tableheader?: boolean, altrows?: boolean, dashedborders?: boolean } | null

              Allows to set predefined values for the Dialog Window of the following toolbar items: 'table', 'image', 'video', 'hyperlink'.

              Properties

              addressAllows to preset the value for the hyperlink address field in the Dialog Window.
              targetAllows to preset the value for the hyperlink target field in the Dialog Window.
              textAllows to preset the value for the hyperlink text field in the Dialog Window.
              titleAllows to preset the value for the hyperlink/image title field in the Dialog Window.
              fileAllows to preset the value for the image/video file uploader in the Dialog Window.
              altAllows to preset the value for the image/video alt field in the Dialog Window.
              urlAllows to preset the value for the image/video url field in the Dialog Window.
              widthAllows to preset the value for the image/table/video width field in the Dialog Window.
              heightAllows to preset the value for the image/table/video height field in the Dialog Window.
              captionAllows to preset the value for the image/video caption field in the Dialog Window.
              alignmentAllows to preset the value for the image/video alignment field in the Dialog Window.
              displayAllows to preset the value for the image/video display field in the Dialog Window.
              draggableAllows to preset the value for the image draggable field in the Dialog Window.
              resizableAllows to preset the value for the image/table/video resizable field in the Dialog Window.
              colsAllows to preset the value for the table cols field in the Dialog Window.
              rowsAllows to preset the value for the table rows field in the Dialog Window.
              tableheaderAllows to preset the value for the table header field in the Dialog Window.
              altrowsAllows to preset the value for the table altrows field in the Dialog Window.
              dashedbordersAllows to preset the value for the table dashedborders field in the Dialog Window.

              Back to root property: toolbarItems

              Try a demo showcasing the editor property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const editor = el.toolbarItems[0].editor;

              addressAllows to preset the value for the hyperlink address field in the Dialog Window.string | null

              Allows to preset the value for the hyperlink address field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the address property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const address = el.toolbarItems[0].address;

              alignmentAllows to preset the value for the image/video alignment field in the Dialog Window.string | null

              Allows to preset the value for the image/video alignment field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the alignment property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const alignment = el.toolbarItems[0].alignment;

              altAllows to preset the value for the image/video alt field in the Dialog Window.string | null

              Allows to preset the value for the image/video alt field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the alt property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const alt = el.toolbarItems[0].alt;

              altrowsAllows to preset the value for the table altrows field in the Dialog Window.boolean | null

              Allows to preset the value for the table altrows field in the Dialog Window.

              Default value

              false

              Back to root property: toolbarItems

              Try a demo showcasing the altrows property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const altrows = el.toolbarItems[0].altrows;

              captionAllows to preset the value for the image/video caption field in the Dialog Window.string | null

              Allows to preset the value for the image/video caption field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the caption property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const caption = el.toolbarItems[0].caption;

              colsAllows to preset the value for the table cols field in the Dialog Window.number | string | null

              Allows to preset the value for the table cols field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the cols property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const cols = el.toolbarItems[0].cols;

              dashedbordersAllows to preset the value for the table dashedborders field in the Dialog Window.boolean | null

              Allows to preset the value for the table dashedborders field in the Dialog Window.

              Default value

              false

              Back to root property: toolbarItems

              Try a demo showcasing the dashedborders property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const dashedborders = el.toolbarItems[0].dashedborders;

              displayAllows to preset the value for the image/video display field in the Dialog Window.string | null

              Allows to preset the value for the image/video display field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the display property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const display = el.toolbarItems[0].display;

              draggableAllows to preset the value for the image draggable field in the Dialog Window.boolean | null

              Allows to preset the value for the image draggable field in the Dialog Window.

              Default value

              false

              Back to root property: toolbarItems

              Try a demo showcasing the draggable property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const draggable = el.toolbarItems[0].draggable;

              fileAllows to preset the value for the image/video file uploader in the Dialog Window.object

              Allows to preset the value for the image/video file uploader in the Dialog Window.

              Back to root property: toolbarItems

              Read the nested value:

              const el = document.querySelector('smart-editor');
const file = el.toolbarItems[0].file;

              heightAllows to preset the value for the image/table/video height field in the Dialog Window.string | number

              Allows to preset the value for the image/table/video height field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the height property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const height = el.toolbarItems[0].height;

              resizableAllows to preset the value for the image/table/video resizable field in the Dialog Window.boolean | null

              Allows to preset the value for the image/table/video resizable field in the Dialog Window.

              Default value

              false

              Back to root property: toolbarItems

              Try a demo showcasing the resizable property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const resizable = el.toolbarItems[0].resizable;

              rowsAllows to preset the value for the table rows field in the Dialog Window.number | string | null

              Allows to preset the value for the table rows field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the rows property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const rows = el.toolbarItems[0].rows;

              tableheaderAllows to preset the value for the table header field in the Dialog Window.boolean | null

              Allows to preset the value for the table header field in the Dialog Window.

              Default value

              false

              Back to root property: toolbarItems

              Try a demo showcasing the tableheader property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const tableheader = el.toolbarItems[0].tableheader;

              targetAllows to preset the value for the hyperlink target field in the Dialog Window.string | null

              Allows to preset the value for the hyperlink target field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the target property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const target = el.toolbarItems[0].target;

              textAllows to preset the value for the hyperlink text field in the Dialog Window.string | null

              Allows to preset the value for the hyperlink text field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the text property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const text = el.toolbarItems[0].text;

              titleAllows to preset the value for the hyperlink/image title field in the Dialog Window.string | null

              Allows to preset the value for the hyperlink/image title field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the title property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const title = el.toolbarItems[0].title;

              urlAllows to preset the value for the image/video url field in the Dialog Window.string | null

              Allows to preset the value for the image/video url field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the url property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const url = el.toolbarItems[0].url;

              widthAllows to preset the value for the image/table/video width field in the Dialog Window.string | number

              Allows to preset the value for the image/table/video width field in the Dialog Window.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the width property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const width = el.toolbarItems[0].width;

              inlineToolbarItemsDefines the list of toolbar items for the Inline Toolbar. Accept the same values as toolbarItems property. string[] | { name?: string, disabled?: boolean, advanced?: boolean, dataSource?: string[] : object[], template?: function | string, width?: string | number }[]

              Defines the list of toolbar items for the Inline Toolbar. Accept the same values as toolbarItems property.

              Back to root property: toolbarItems

              Try a demo showcasing the inlineToolbarItems property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const inlineToolbarItems = el.toolbarItems[0].editor.inlineToolbarItems;

              nameThe unique name of the toolbar item. The list of all possible names is available in the description above.string | null

              The unique name of the toolbar item. The list of all possible names is available in the description above.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the name property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const name = el.toolbarItems[0].editor.name;

              templateAllows to set a template for a custom Toolbar item when the name attribute is set to 'custom'.function | string | null

              Allows to set a template for a custom Toolbar item when the name attribute is set to 'custom'.

              Back to root property: toolbarItems

              Try a demo showcasing the template property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const template = el.toolbarItems[0].editor.template;

              widthDetermines the width of the toolbar item.number | string | null

              Determines the width of the toolbar item.

              Default value

              ""

              Back to root property: toolbarItems

              Try a demo showcasing the width property.

              Read the nested value:

              const el = document.querySelector('smart-editor');
const width = el.toolbarItems[0].editor.width;

              toolbarModeSpecifies the display style of the Editor’s main toolbar. You can choose between "Ribbon" mode, which presents the toolbar as a horizontal panel with grouped command icons similar to modern office applications, or "Menu" mode, which organizes commands in drop-down menus for a more compact, traditional interface. This setting controls how users interact with the Editor’s primary tools and functions."menu" | "singleLineRibbon"

              Specifies the display style of the Editor’s main toolbar. You can choose between "Ribbon" mode, which presents the toolbar as a horizontal panel with grouped command icons similar to modern office applications, or "Menu" mode, which organizes commands in drop-down menus for a more compact, traditional interface. This setting controls how users interact with the Editor’s primary tools and functions.

              Allowed Values

              • "menu" - The toolbar is arranged like a menu.
              • "singleLineRibbon" - The Toolbar is arranged like a Ribbon with Tabs and Groups. Each tab contains one or more groups of items. Tabs can trigger the visibility of the group items when selected. The Groups can be docked, in which case their visibility is controlled by the toolbar toggle button.

              Default value

              "menu"
              Try a demo showcasing the toolbarMode property.

              Examples

              Markup and runtime examples for toolbarMode:

              HTML:

              <smart-editor toolbar-mode="singleLineRibbon"></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.toolbarMode = "menu";

              Read the current value:

              const el = document.querySelector('smart-editor');
const toolbarMode = el.toolbarMode;

              toolbarRibbonConfigEnables customization of the SingleLineRibbon's appearance by allowing you to modify the arrangement and selection of group items, as well as reorder the groups themselves. This provides flexibility in tailoring the ribbon layout to better suit your application's specific needs.{ name: string, groups: { name: string, items: string[] }[] }[]

              Enables customization of the SingleLineRibbon's appearance by allowing you to modify the arrangement and selection of group items, as well as reorder the groups themselves. This provides flexibility in tailoring the ribbon layout to better suit your application's specific needs.

              Default value

              [{"name":"homeTab","groups":[{"name":"undoGroup","items":["undo","redo"]},{"name":"clipboardGroup","items":["cut","copy","paste"]},{"name":"fontGroup","items":["fontName","fontSize","backgroundColor","fontColor","clearFormat","formats","bold","italic","underline","strikethrough","superscript","subscript"]},{"name":"paragraphGroup","items":["orderedList","unorderedList","indent","outdent","alignment"]},{"name":"editingGroup","items":["findAndReplace"]}]},{"name":"insertTab","groups":[{"name":"tableGroup","items":["table"]},{"name":"imageGroup","items":["image"]}{"name":"videoGroup","items":["video"]},{"name":"linkGroup","items":["createLink","removeLink"]}]},{"name":"viewTab","groups":[{"name":"viewsGroup","items":["fullScreen","sourceCode","splitMode"]}]},{"name":"layoutTab","hidden":true,"groups":[{"name":"deleteGroup","items":["delete"]},{"name":"tableGroup","items":["table","tableHeader","tableRows","tableColumns","tableVAlign","tableStyle",""]},{"name":"imageGroup","items":["image","caption"]},{"name":"videoGroup","items":["video","caption"]}]}]

              Examples

              Markup and runtime examples for toolbarRibbonConfig:

              HTML:

              <smart-editor toolbar-ribbon-config="[{"name":"homeTab","groups":[{"name":"undoGroup","items":["undo","redo"]},{"name":"paragraphGroup","items":["orderedList","unorderedList","alignment"]}]},{"name":"insertTab","groups":[{"name":"tableGroup","items":["table"]},{"name":"imageGroup","items":["image"]},{"name":"linkGroup","items":["createLink","removeLink"]}]},{"name":"viewTab","groups":[{"name":"viewsGroup","items":["fullScreen","sourceCode","splitMode"]}]},{"name":"layoutTab","hidden":true,"groups":[{"name":"deleteGroup","items":["delete"]},{"name":"tableGroup","items":["table","tableHeader","tableRows","tableColumns","tableVAlign","tableStyle",""]},{"name":"imageGroup","items":["image","caption"]}]}]"></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.toolbarRibbonConfig = [{"name":"homeTab","groups":[{"name":"undoGroup","items":["undo","redo"]},{"name":"clipboardGroup","items":["cut","copy","paste"]},{"name":"fontGroup","items":["fontName","fontSize","backgroundColor","fontColor","clearFormat","formats","bold","italic","underline","strikethrough","superscript","subscript"]},{"name":"paragraphGroup","items":["orderedList","unorderedList","indent","outdent","alignment"]},{"name":"editingGroup","items":["findAndReplace"]}]},{"name":"layoutTab","hidden":true,"groups":[{"name":"deleteGroup","items":["delete"]},{"name":"tableGroup","items":["table","tableHeader","tableRows","tableColumns","tableVAlign","tableStyle",""]},{"name":"imageGroup","items":["image","caption"]}]}];

              Read the current value:

              const el = document.querySelector('smart-editor');
const toolbarRibbonConfig = el.toolbarRibbonConfig;

              toolbarStickyFixes the Toolbar to the top of the browser window, ensuring it remains visible at all times, even as the user scrolls through the page content.boolean

              Fixes the Toolbar to the top of the browser window, ensuring it remains visible at all times, even as the user scrolls through the page content.

              Default value

              false
              Try a demo showcasing the toolbarSticky property.

              Examples

              Markup and runtime examples for toolbarSticky:

              HTML attribute:

              <smart-editor toolbar-sticky></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.toolbarSticky = false;

              Read the current value:

              const el = document.querySelector('smart-editor');
const toolbarSticky = el.toolbarSticky;

              toolbarViewModeSpecifies the format (such as plain text, HTML, or Markdown) that will be applied to content when it is pasted into the Editor. This setting controls how the pasted data is interpreted and ensures that it is correctly displayed within the Editor environment."toggle" | "multiRow" | "scroll"

              Specifies the format (such as plain text, HTML, or Markdown) that will be applied to content when it is pasted into the Editor. This setting controls how the pasted data is interpreted and ensures that it is correctly displayed within the Editor environment.

              Allowed Values

              • "toggle" - The Toolbar can be toggled via a toggle button.
              • "multiRow" - The Toolbar items are splitted on multiple rows depending on the width of the Editor.
              • "scroll" - The Toolbar items are placed in a single row and a scrollbar appears allowing to scroll through them if necessary.

              Default value

              "toggle"
              Try a demo showcasing the toolbarViewMode property.

              Examples

              Markup and runtime examples for toolbarViewMode:

              HTML:

              <smart-editor toolbar-view-mode="multiRow"></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.toolbarViewMode = "scroll";

              Read the current value:

              const el = document.querySelector('smart-editor');
const toolbarViewMode = el.toolbarViewMode;

              unfocusableIf set to true, this property prevents the element from receiving keyboard or programmatic focus, making it impossible for users to interact with it using the keyboard or assistive technologies.boolean

              If set to true, this property prevents the element from receiving keyboard or programmatic focus, making it impossible for users to interact with it using the keyboard or assistive technologies.

              Default value

              false

              Examples

              Markup and runtime examples for unfocusable:

              HTML attribute:

              <smart-editor unfocusable></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.unfocusable = false;

              Read the current value:

              const el = document.querySelector('smart-editor');
const unfocusable = el.unfocusable;

              unlockKeyGets or sets the unlockKey, a unique value required to activate or unlock the product’s features. Use this property to provide the unlock key when authorizing access, or retrieve the current unlock key associated with the product.string

              Gets or sets the unlockKey, a unique value required to activate or unlock the product’s features. Use this property to provide the unlock key when authorizing access, or retrieve the current unlock key associated with the product.

              Default value

              ""

              Examples

              Markup and runtime examples for unlockKey:

              HTML:

              <smart-editor unlock-key=""></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.unlockKey = "1111-2222-3333-4444-5555";

              Read the current value:

              const el = document.querySelector('smart-editor');
const unlockKey = el.unlockKey;

              uploadUrlSpecifies the URL endpoint used for file uploads. This property directly maps to the 'action' attribute of the upload form, determining where the uploaded data is sent on the server. For example, you can set the 'uploadUrl' property to the path of a server-side script such as a PHP file (e.g., "upload.php") that processes and handles incoming file uploads. Setting this property ensures that files selected by the user are transmitted to the specified server location when the upload form is submitted.string

              Specifies the URL endpoint used for file uploads. This property directly maps to the 'action' attribute of the upload form, determining where the uploaded data is sent on the server. For example, you can set the 'uploadUrl' property to the path of a server-side script such as a PHP file (e.g., "upload.php") that processes and handles incoming file uploads. Setting this property ensures that files selected by the user are transmitted to the specified server location when the upload form is submitted.

              Default value

              ""

              Examples

              Markup and runtime examples for uploadUrl:

              HTML:

              <smart-editor upload-url="localhost"></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.uploadUrl = "localhost/fileUpload";

              Read the current value:

              const el = document.querySelector('smart-editor');
const uploadUrl = el.uploadUrl;

              usersDefines the list of editor users for the application. Expects an array of user objects, each requiring the following properties: - ''id'': A unique identifier for the user (string or number). - ''name'': The display name of the user (string). Each user object may also include the following optional properties: - ''color'': A string specifying the user's color (e.g., HEX or CSS color value) for UI highlighting. - ''image'': A string containing the URL of the user's avatar or profile image.[]

              Defines the list of editor users for the application. Expects an array of user objects, each requiring the following properties:
              - ''id'': A unique identifier for the user (string or number).
              - ''name'': The display name of the user (string).

              Each user object may also include the following optional properties:
              - ''color'': A string specifying the user's color (e.g., HEX or CSS color value) for UI highlighting.
              - ''image'': A string containing the URL of the user's avatar or profile image.

              Default value

              []
              Try a demo showcasing the users property.

              Examples

              Markup and runtime examples for users:

              HTML:

              <smart-editor users="[]"></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.users = [];

              Read the current value:

              const el = document.querySelector('smart-editor');
const users = el.users;

              valueProvides methods to retrieve or update the current content within the Editor. Use this property to access the existing value or assign a new value to the Editor programmatically.string

              Provides methods to retrieve or update the current content within the Editor. Use this property to access the existing value or assign a new value to the Editor programmatically.

              Default value

              """"
              Try a demo showcasing the value property.

              Examples

              Markup and runtime examples for value:

              HTML:

              <smart-editor value="New Value..."></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.value = "'Markdown'";

              Read the current value:

              const el = document.querySelector('smart-editor');
const value = el.value;

              windowCustomizationFunctionA customizable function that allows you to fully modify the appearance and behavior of the Editor dialog used for inserting or editing tables, images, videos, and hyperlinks. The function receives two arguments:- 'target': The dialog element instance that is about to be displayed, representing the specific editor dialog (e.g., Table, Image, Video, or Hyperlink dialog) being opened.- 'item': The toolbar item object that triggered the opening of the dialog, allowing you to access information about the source of the dialog request or customize its settings based on the initiating toolbar action.Use this function to tailor the dialog's UI elements, default values, event handlers, or any other properties, providing a flexible way to match the dialog experience to your application's needs.function | null

              A customizable function that allows you to fully modify the appearance and behavior of the Editor dialog used for inserting or editing tables, images, videos, and hyperlinks. The function receives two arguments:

              - 'target': The dialog element instance that is about to be displayed, representing the specific editor dialog (e.g., Table, Image, Video, or Hyperlink dialog) being opened.
              - 'item': The toolbar item object that triggered the opening of the dialog, allowing you to access information about the source of the dialog request or customize its settings based on the initiating toolbar action.

              Use this function to tailor the dialog's UI elements, default values, event handlers, or any other properties, providing a flexible way to match the dialog experience to your application's needs.

              Examples

              Markup and runtime examples for windowCustomizationFunction:

              HTML:

              <smart-editor window-customization-function="null"></smart-editor>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-editor');
el.windowCustomizationFunction = "function(target, item) { if (item.name === 'image') { target.headerPosition = 'left'; } }";

              Read the current value:

              const el = document.querySelector('smart-editor');
const windowCustomizationFunction = el.windowCustomizationFunction;

              Events

              actionEndThis event is triggered after a Toolbar action has been completed. It signifies that all processes related to the action, such as updating the UI or executing related logic, have finished. Use this event to perform any follow-up tasks when a Toolbar action concludes.CustomEvent

              This event is triggered after a Toolbar action has been completed. It signifies that all processes related to the action, such as updating the UI or executing related logic, have finished. Use this event to perform any follow-up tasks when a Toolbar action concludes.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onActionEnd

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.name - The name of the action.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for actionEnd using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('actionEnd', (event) => {
    const detail = event.detail,
        name = detail.name;

	// event handling code goes here.
})

              actionStartThis event is fired immediately before a Toolbar action begins execution, allowing developers to intervene or modify behavior as needed. By invoking event.preventDefault() within the event handler, you can cancel the pending Toolbar action, preventing it from proceeding. This provides an opportunity to implement custom validation, confirmation prompts, or other pre-action logic before the Toolbar action is carried out.CustomEvent

              This event is fired immediately before a Toolbar action begins execution, allowing developers to intervene or modify behavior as needed. By invoking event.preventDefault() within the event handler, you can cancel the pending Toolbar action, preventing it from proceeding. This provides an opportunity to implement custom validation, confirmation prompts, or other pre-action logic before the Toolbar action is carried out.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onActionStart

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.name - The name of the action.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for actionStart using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('actionStart', (event) => {
    const detail = event.detail,
        name = detail.name;

	// event handling code goes here.
})

              changeThis event is triggered when an element loses focus (blur event) and its content has been modified since it last received focus.CustomEvent

              This event is triggered when an element loses focus (blur event) and its content has been modified since it last received focus.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onChange

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.oldValue - The old value before the change.
              ev.detail.value - The new value after the change.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Try a demo showcasing the change event.

              Examples

              Listen for change using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

              changingThis event is triggered immediately after the user modifies the content through direct input, such as typing, pasting, or deleting text. It serves as a notification that the content has changed specifically due to user interaction, allowing you to respond to updates made by the user in real time.CustomEvent

              This event is triggered immediately after the user modifies the content through direct input, such as typing, pasting, or deleting text. It serves as a notification that the content has changed specifically due to user interaction, allowing you to respond to updates made by the user in real time.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onChanging

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.oldValue - The old value before the input change.
              ev.detail.value - The new value after the input change.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for changing using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('changing', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

              contextMenuCloseThis event is triggered whenever the Context Menu is closed, either by user action (such as clicking outside the menu, selecting a menu item, or pressing the Escape key) or programmatically through the relevant API. Handlers for this event can be used to perform clean-up tasks or update the user interface in response to the Context Menu being dismissed.CustomEvent

              This event is triggered whenever the Context Menu is closed, either by user action (such as clicking outside the menu, selecting a menu item, or pressing the Escape key) or programmatically through the relevant API. Handlers for this event can be used to perform clean-up tasks or update the user interface in response to the Context Menu being dismissed.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onContextMenuClose

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.
              ev.detail.owner - The tooltip target (the owner of the tooltip).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for contextMenuClose using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('contextMenuClose', (event) => {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner;

	// event handling code goes here.
})

              contextMenuClosingThis event is fired just before the Context Menu begins to close. By calling event.preventDefault() within the event handler, you can cancel the closing action, allowing you to override or delay the default behavior based on custom logic.CustomEvent

              This event is fired just before the Context Menu begins to close. By calling event.preventDefault() within the event handler, you can cancel the closing action, allowing you to override or delay the default behavior based on custom logic.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onContextMenuClosing

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for contextMenuClosing using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('contextMenuClosing', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              contextMenuItemClickThis event is triggered when a user selects and clicks on an item within the context menu. It allows you to execute custom logic in response to specific context menu actions, providing access to details about which menu item was clicked and the relevant context of the interaction.CustomEvent

              This event is triggered when a user selects and clicks on an item within the context menu. It allows you to execute custom logic in response to specific context menu actions, providing access to details about which menu item was clicked and the relevant context of the interaction.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onContextMenuItemClick

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.originalEvent - The original click event.
              ev.detail.value - The value of the item.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Try a demo showcasing the contextMenuItemClick event.

              Examples

              Listen for contextMenuItemClick using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('contextMenuItemClick', (event) => {
    const detail = event.detail,
        originalEvent = detail.originalEvent,
        value = detail.value;

	// event handling code goes here.
})

              contextMenuOpenThis event is triggered whenever the user opens the context menu, typically by right-clicking or using a designated keyboard shortcut on an element. It allows developers to execute custom logic or modify the context menu's content before it is displayed to the user.CustomEvent

              This event is triggered whenever the user opens the context menu, typically by right-clicking or using a designated keyboard shortcut on an element. It allows developers to execute custom logic or modify the context menu's content before it is displayed to the user.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onContextMenuOpen

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.
              ev.detail.owner - The tooltip target (the owner of the tooltip).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for contextMenuOpen using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('contextMenuOpen', (event) => {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner;

	// event handling code goes here.
})

              contextMenuOpeningThis event is triggered immediately before the context menu appears, typically as a result of a user right-clicking or performing a similar gesture. At this point, you have the opportunity to customize or modify the context menu, or to prevent the menu from opening entirely by calling event.preventDefault() within the event handler.CustomEvent

              This event is triggered immediately before the context menu appears, typically as a result of a user right-clicking or performing a similar gesture. At this point, you have the opportunity to customize or modify the context menu, or to prevent the menu from opening entirely by calling event.preventDefault() within the event handler.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onContextMenuOpening

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for contextMenuOpening using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('contextMenuOpening', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              dialogCloseThis event is triggered whenever the Dialog Window is closed by the user, either through clicking the close button, pressing the escape key, or programmatically via code. It allows developers to execute custom actions or clean up resources after the dialog has been dismissed.CustomEvent

              This event is triggered whenever the Dialog Window is closed by the user, either through clicking the close button, pressing the escape key, or programmatically via code. It allows developers to execute custom actions or clean up resources after the dialog has been dismissed.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onDialogClose

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The window that is the target of the operation.
              ev.detail.item - The toolbar item that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dialogClose using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dialogClose', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item;

	// event handling code goes here.
})

              dialogClosingThis event is fired immediately before the Dialog Window begins to close. It provides an opportunity to execute custom logic or perform validation before the dialog is dismissed. The closure of the dialog can be canceled by calling event.preventDefault() within the event handler.CustomEvent

              This event is fired immediately before the Dialog Window begins to close. It provides an opportunity to execute custom logic or perform validation before the dialog is dismissed. The closure of the dialog can be canceled by calling event.preventDefault() within the event handler.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDialogClosing

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The window that is the target of the operation.
              ev.detail.item - The toolbar item that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dialogClosing using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dialogClosing', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item;

	// event handling code goes here.
})

              dialogOpenThis event is triggered when the Dialog Window is successfully opened and becomes visible to the user.CustomEvent

              This event is triggered when the Dialog Window is successfully opened and becomes visible to the user.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onDialogOpen

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The window that is the target of the operation.
              ev.detail.item - The toolbar item is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dialogOpen using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dialogOpen', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item;

	// event handling code goes here.
})

              dialogOpeningThis event is fired immediately before the Dialog Window begins to open, giving developers an opportunity to perform actions or modify options prior to rendering. You can cancel the default behavior and prevent the Dialog Window from opening by calling event.preventDefault() within the event handler.CustomEvent

              This event is fired immediately before the Dialog Window begins to open, giving developers an opportunity to perform actions or modify options prior to rendering. You can cancel the default behavior and prevent the Dialog Window from opening by calling event.preventDefault() within the event handler.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDialogOpening

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The window that is the target of the operation.
              ev.detail.item - The toolbar item that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dialogOpening using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dialogOpening', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item;

	// event handling code goes here.
})

              dropDownToolbarCloseThis event is triggered whenever the Drop Down Toolbar is closed, either by user interaction (such as clicking outside the toolbar or selecting an option) or programmatically via the application's code. Use this event to perform actions or update the user interface in response to the toolbar being dismissed.CustomEvent

              This event is triggered whenever the Drop Down Toolbar is closed, either by user interaction (such as clicking outside the toolbar or selecting an option) or programmatically via the application's code. Use this event to perform actions or update the user interface in response to the toolbar being dismissed.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onDropDownToolbarClose

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.
              ev.detail.owner - The tooltip target (the owner of the tooltip).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dropDownToolbarClose using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dropDownToolbarClose', (event) => {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner;

	// event handling code goes here.
})

              dropDownToolbarClosingThis event is fired when the Drop Down Toolbar begins its closing process. Within the event handler, you can prevent the toolbar from closing by invoking event.preventDefault(). This provides an opportunity to execute custom logic, such as confirming the action with the user or validating conditions before allowing the toolbar to close.CustomEvent

              This event is fired when the Drop Down Toolbar begins its closing process. Within the event handler, you can prevent the toolbar from closing by invoking event.preventDefault(). This provides an opportunity to execute custom logic, such as confirming the action with the user or validating conditions before allowing the toolbar to close.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDropDownToolbarClosing

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dropDownToolbarClosing using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dropDownToolbarClosing', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              dropDownToolbarOpenThis event is triggered each time the Drop Down Toolbar becomes visible to the user, such as when it is expanded or opened. You can use this event to execute custom logic whenever the toolbar is displayed, for example, to load dynamic content or adjust UI elements within the toolbar.CustomEvent

              This event is triggered each time the Drop Down Toolbar becomes visible to the user, such as when it is expanded or opened. You can use this event to execute custom logic whenever the toolbar is displayed, for example, to load dynamic content or adjust UI elements within the toolbar.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onDropDownToolbarOpen

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.
              ev.detail.owner - The tooltip target (the owner of the tooltip).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dropDownToolbarOpen using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dropDownToolbarOpen', (event) => {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner;

	// event handling code goes here.
})

              dropDownToolbarOpeningThis event is triggered just before the Drop Down Toolbar begins to open. Within the event handler, you can call event.preventDefault() to cancel the opening operation, allowing you to customize or prevent the display of the toolbar based on specific conditions. This provides an opportunity to implement custom logic before the toolbar becomes visible to the user.CustomEvent

              This event is triggered just before the Drop Down Toolbar begins to open. Within the event handler, you can call event.preventDefault() to cancel the opening operation, allowing you to customize or prevent the display of the toolbar based on specific conditions. This provides an opportunity to implement custom logic before the toolbar becomes visible to the user.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDropDownToolbarOpening

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dropDownToolbarOpening using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('dropDownToolbarOpening', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              imageUploadFailedThis event is triggered when an attempt to upload an image or video fails, indicating that the file was not successfully transferred to the server due to an error or interruption during the upload process.CustomEvent

              This event is triggered when an attempt to upload an image or video fails, indicating that the file was not successfully transferred to the server due to an error or interruption during the upload process.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onImageUploadFailed

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The file upload element that is the target of the operation.
              ev.detail.item - The toolbar item that is the target of the operation.
              ev.detail.filename - The name of the canceled file.
              ev.detail.type - The type of the canceled file.
              ev.detail.size - The size of the canceled file.
              ev.detail.index - The index of the canceled file.
              ev.detail.status - The status of the uploaded file. Whether there was an error or success.
              ev.detail.serverResponse - The response of the remote server.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for imageUploadFailed using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('imageUploadFailed', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index,
        status = detail.status,
        serverResponse = detail.serverResponse;

	// event handling code goes here.
})

              imageUploadSuccessThis event is triggered when an image or video file has been uploaded successfully to the server. It indicates the completion of the upload process without errors, allowing you to perform additional actions such as displaying a success message or updating the user interface.CustomEvent

              This event is triggered when an image or video file has been uploaded successfully to the server. It indicates the completion of the upload process without errors, allowing you to perform additional actions such as displaying a success message or updating the user interface.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onImageUploadSuccess

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The file upload element that is the target of the operation.
              ev.detail.item - The toolbar item that is the target of the operation.
              ev.detail.filename - The name of the uploaded file.
              ev.detail.type - The type of the uploaded file.
              ev.detail.size - The size of the uploaded file.
              ev.detail.index - The index of the uploaded file.
              ev.detail.status - The status of the uploaded file. Whether there was an error or success.
              ev.detail.serverResponse - The response of the remote server.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for imageUploadSuccess using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('imageUploadSuccess', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index,
        status = detail.status,
        serverResponse = detail.serverResponse;

	// event handling code goes here.
})

              inlineToolbarCloseThis event is triggered whenever the inline toolbar is closed, either by user interaction (such as clicking outside the toolbar, pressing Esc, or selecting a toolbar option) or programmatically via code. It provides an opportunity to perform cleanup, update UI elements, or execute additional logic in response to the toolbar being dismissed.CustomEvent

              This event is triggered whenever the inline toolbar is closed, either by user interaction (such as clicking outside the toolbar, pressing Esc, or selecting a toolbar option) or programmatically via code. It provides an opportunity to perform cleanup, update UI elements, or execute additional logic in response to the toolbar being dismissed.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onInlineToolbarClose

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.
              ev.detail.owner - The tooltip target (the owner of the tooltip).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for inlineToolbarClose using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('inlineToolbarClose', (event) => {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner;

	// event handling code goes here.
})

              inlineToolbarClosingThis event is triggered immediately before the inline toolbar begins to close, allowing you to perform actions or cleanup tasks in response to the toolbar's closure.CustomEvent

              This event is triggered immediately before the inline toolbar begins to close, allowing you to perform actions or cleanup tasks in response to the toolbar's closure.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onInlineToolbarClosing

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for inlineToolbarClosing using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('inlineToolbarClosing', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              inlineToolbarOpenThis event is triggered whenever the inline Toolbar becomes visible to the user, such as when a user selects text or performs an action that causes the Toolbar to appear within the interface. Use this event to run custom logic or adjust UI elements in response to the Toolbar opening.CustomEvent

              This event is triggered whenever the inline Toolbar becomes visible to the user, such as when a user selects text or performs an action that causes the Toolbar to appear within the interface. Use this event to run custom logic or adjust UI elements in response to the Toolbar opening.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onInlineToolbarOpen

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.
              ev.detail.owner - The tooltip target (the owner of the tooltip).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for inlineToolbarOpen using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('inlineToolbarOpen', (event) => {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner;

	// event handling code goes here.
})

              inlineToolbarOpeningThis event is fired just before the inline Toolbar begins to open. Developers can intercept this event and prevent the Toolbar from opening by invoking event.preventDefault() within the event handler. This allows for conditional control over the Toolbar's visibility based on custom application logic.CustomEvent

              This event is fired just before the inline Toolbar begins to open. Developers can intercept this event and prevent the Toolbar from opening by invoking event.preventDefault() within the event handler. This allows for conditional control over the Toolbar's visibility based on custom application logic.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onInlineToolbarOpening

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The toolbar that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for inlineToolbarOpening using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('inlineToolbarOpening', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              messageCloseThis event is triggered whenever a user closes a message, such as dismissing a notification or alert. It allows you to execute custom logic in response to the message being removed from the user interface.CustomEvent

              This event is triggered whenever a user closes a message, such as dismissing a notification or alert. It allows you to execute custom logic in response to the message being removed from the user interface.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onMessageClose

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.instance - The toast item that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for messageClose using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('messageClose', (event) => {
    const detail = event.detail,
        instance = detail.instance;

	// event handling code goes here.
})

              messageOpenThis event is triggered whenever a user opens or views a message, indicating that the message content has become visible or active in the user interface. It can be used to track message engagement, update message status, or initiate follow-up actions when a message is accessed.CustomEvent

              This event is triggered whenever a user opens or views a message, indicating that the message content has become visible or active in the user interface. It can be used to track message engagement, update message status, or initiate follow-up actions when a message is accessed.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onMessageOpen

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.instance - The toast item that is the target of the operation.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for messageOpen using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('messageOpen', (event) => {
    const detail = event.detail,
        instance = detail.instance;

	// event handling code goes here.
})

              resizeEndThis event is triggered when the user has completed resizing an image, table, or video element. It fires after the resizing action ends, allowing you to perform actions such as saving the new dimensions or updating the layout in response to the change.CustomEvent

              This event is triggered when the user has completed resizing an image, table, or video element. It fires after the resizing action ends, allowing you to perform actions such as saving the new dimensions or updating the layout in response to the change.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onResizeEnd

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.target - The element that is resized (image/table or video).

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for resizeEnd using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('resizeEnd', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

              resizeStartThis event is triggered when a user initiates the resizing of an image, table, or video element. It indicates that the resizing operation has begun, allowing you to implement custom behaviors or UI updates in response to the start of a resize action.CustomEvent

              This event is triggered when a user initiates the resizing of an image, table, or video element. It indicates that the resizing operation has begun, allowing you to implement custom behaviors or UI updates in response to the start of a resize action.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onResizeStart

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for resizeStart using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('resizeStart', (event) => {
	// event handling code goes here.
})

              toobarItemClickThis event is triggered whenever a user clicks on an item within the Toolbar. It provides relevant information about the clicked item, allowing you to execute custom logic or actions in response to the user's interaction with the Toolbar.CustomEvent

              This event is triggered whenever a user clicks on an item within the Toolbar. It provides relevant information about the clicked item, allowing you to execute custom logic or actions in response to the user's interaction with the Toolbar.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onToobarItemClick

              Arguments

              evCustomEvent
              ev.detailObject
              ev.detail.originalEvent - The original click event.
              ev.detail.value - The name of the toolbar item that was clicked.

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for toobarItemClick using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-editor')?.addEventListener('toobarItemClick', (event) => {
    const detail = event.detail,
        originalEvent = detail.originalEvent,
        value = detail.value;

	// event handling code goes here.
})

              Methods

              addToolbarItem( itemName: any): voidIntegrates a custom item into the editor’s toolbar. **Example Usage:**```jseditor.addToolbarItem({ name: 'customButton2', // Unique identifier for the toolbar item width: 100, // Width of the toolbar item in pixels template: 'Button2' // Custom HTML template defining the toolbar item's appearance and content});```**Description:** This method allows you to add a new, customizable button or element to the editor’s toolbar. You specify a unique name, the width, and provide an HTML template for the item’s content. This enables the creation of tailored toolbar controls to enhance your editor’s functionality according to your application’s needs.

              Integrates a custom item into the editor’s toolbar.

              **Example Usage:**
              ```js
              editor.addToolbarItem({
              name: 'customButton2', // Unique identifier for the toolbar item
              width: 100, // Width of the toolbar item in pixels
              template: 'Button2' // Custom HTML template defining the toolbar item's appearance and content
              });
              ```

              **Description:**
              This method allows you to add a new, customizable button or element to the editor’s toolbar. You specify a unique name, the width, and provide an HTML template for the item’s content. This enables the creation of tailored toolbar controls to enhance your editor’s functionality according to your application’s needs.

              Arguments

              itemNameany

              The toolbar item to be added

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.addToolbarItem("bold");

              Try a demo showcasing the addToolbarItem method.

              blur(): voidApplies a blur effect to the content area of the Editor, visually obscuring text and elements to reduce readability while maintaining overall layout and structure. This feature is useful for masking sensitive information or creating a focus effect within the Editor interface.

              Applies a blur effect to the content area of the Editor, visually obscuring text and elements to reduce readability while maintaining overall layout and structure. This feature is useful for masking sensitive information or creating a focus effect within the Editor interface.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.blur();

              clearContent(): voidRemoves all text and formatting from the Editor, resetting its content to an empty state.

              Removes all text and formatting from the Editor, resetting its content to an empty state.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.clearContent();

              Try a demo showcasing the clearContent method.

              clearState(): voidRemoves all previously saved states associated with the current Editor's ID from the local storage. This ensures that any stored data related to this specific Editor instance is deleted, allowing for a fresh start or preventing data conflicts.

              Removes all previously saved states associated with the current Editor's ID from the local storage. This ensures that any stored data related to this specific Editor instance is deleted, allowing for a fresh start or preventing data conflicts.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.clearState();

              Try a demo showcasing the clearState method.

              collapseToolbar(): voidCollapse the toolbar when the toolbarViewMode property is set to 'toggle'. This ensures that the toolbar is hidden or shown based on the toggle state, allowing for a dynamic and responsive user interface.

              Collapse the toolbar when the toolbarViewMode property is set to 'toggle'. This ensures that the toolbar is hidden or shown based on the toggle state, allowing for a dynamic and responsive user interface.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.collapseToolbar();

              disableToolbarItem( itemName: string): voidPrevents user interaction with the specified Toolbar item, making it inactive and visually indicating that it is disabled. The item remains visible but cannot be clicked or selected until re-enabled.

              Prevents user interaction with the specified Toolbar item, making it inactive and visually indicating that it is disabled. The item remains visible but cannot be clicked or selected until re-enabled.

              Arguments

              itemNamestring

              The name of the toolbar item to disable.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.disableToolbarItem("bold","formats");

              enableToolbarItem( itemName: string): voidRestores the functionality of a Toolbar item that was previously disabled, allowing users to click or interact with it again. This action visually updates the item to indicate it is active and accessible within the Toolbar interface.

              Restores the functionality of a Toolbar item that was previously disabled, allowing users to click or interact with it again. This action visually updates the item to indicate it is active and accessible within the Toolbar interface.

              Arguments

              itemNamestring

              The name of the toolbar item to enable.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.enableToolbarItem("bold","formats");

              executeCommand( commandName: string, value?: string | number): booleanEnhances the clarity, consistency, and completeness of the description:---Executes a command using the native execCommand method to modify the contents or formatting of the editor. This method returns true if the command executes successfully or false otherwise. You can use this function to apply a wide range of editing and formatting commands to the currently selected content, or at the current cursor position.Supported commands include: bold: Toggles bold formatting on the selected text. Example: editor.executeCommand('bold'); italic: Toggles italic formatting on the selected text. Example: editor.executeCommand('italic'); underline: Toggles underline formatting on the selected text. Example: editor.executeCommand('underline'); strikeThrough: Toggles strikethrough formatting on the selected text. Example: editor.executeCommand('strikeThrough'); superscript: Sets the selected text as superscript. Example: editor.executeCommand('superscript'); subscript: Sets the selected text as subscript. Example: editor.executeCommand('subscript'); uppercase: Converts the selected text to uppercase. Example: editor.executeCommand('uppercase'); lowercase: Converts the selected text to lowercase. Example: editor.executeCommand('lowercase'); foreColor: Changes the font color of the selected text. Example: editor.executeCommand('foreColor', '#000000'); fontName: Changes the font family of the selected text. Example: editor.executeCommand('fontName', 'Arial'); fontSize: Changes the font size of the selected text. Example: editor.executeCommand('fontSize', '15px'); hiliteColor: Changes the background color (highlight) of the selected text. Example: editor.executeCommand('hiliteColor', '#FFFF00'); justifyCenter: Aligns the selected content to the center. Example: editor.executeCommand('justifyCenter'); justifyFull: Justifies the selected content. Example: editor.executeCommand('justifyFull'); justifyLeft: Aligns the selected content to the left. Example: editor.executeCommand('justifyLeft'); justifyRight: Aligns the selected content to the right. Example: editor.executeCommand('justifyRight'); undo: Undoes the last editing operation. Example: editor.executeCommand('undo'); redo: Redoes the previously undone operation. Example: editor.executeCommand('redo'); createLink: Inserts a hyperlink at the current selection. Accepts an object with text, url, and title properties. Example: editor.executeCommand('createLink', { text: 'Link', url: 'https://example.com', title: 'Example Link' }); indent: Increases the indent level of the selected content. Example: editor.executeCommand('indent'); outdent: Decreases the indent level of the selected content. Example: editor.executeCommand('outdent'); insertHTML: Inserts an HTML string at the current cursor position. Example: editor.executeCommand('insertHTML', '<p>Text</p>'); insertOrderedList: Inserts an ordered (numbered) list. Example: editor.executeCommand('insertOrderedList'); insertUnorderedList: Inserts an unordered (bulleted) list. Example: editor.executeCommand('insertUnorderedList'); removeFormat: Removes all formatting from the selected text. Example: editor.executeCommand('removeFormat'); insertText: Inserts plain text at the current cursor position. Example: editor.executeCommand('insertText', 'Some text to insert'); insertImage: Inserts an image at the current cursor position. Accepts an object with a url property. Example: editor.executeCommand('insertImage', { url: 'https://www.example.com/image.jpg' }); Note: Some commands may not be fully supported in all browsers due to the deprecated status of execCommand. Always test your implementation for compatibility with your target browsers.

              Enhances the clarity, consistency, and completeness of the description:

              ---

              Executes a command using the native execCommand method to modify the contents or formatting of the editor. This method returns true if the command executes successfully or false otherwise. You can use this function to apply a wide range of editing and formatting commands to the currently selected content, or at the current cursor position.

              Supported commands include:




              bold: Toggles bold formatting on the selected text.

              Example: editor.executeCommand('bold');




              italic: Toggles italic formatting on the selected text.

              Example: editor.executeCommand('italic');




              underline: Toggles underline formatting on the selected text.

              Example: editor.executeCommand('underline');




              strikeThrough: Toggles strikethrough formatting on the selected text.

              Example: editor.executeCommand('strikeThrough');




              superscript: Sets the selected text as superscript.

              Example: editor.executeCommand('superscript');




              subscript: Sets the selected text as subscript.

              Example: editor.executeCommand('subscript');




              uppercase: Converts the selected text to uppercase.

              Example: editor.executeCommand('uppercase');




              lowercase: Converts the selected text to lowercase.

              Example: editor.executeCommand('lowercase');




              foreColor: Changes the font color of the selected text.

              Example: editor.executeCommand('foreColor', '#000000');




              fontName: Changes the font family of the selected text.

              Example: editor.executeCommand('fontName', 'Arial');




              fontSize: Changes the font size of the selected text.

              Example: editor.executeCommand('fontSize', '15px');




              hiliteColor: Changes the background color (highlight) of the selected text.

              Example: editor.executeCommand('hiliteColor', '#FFFF00');




              justifyCenter: Aligns the selected content to the center.

              Example: editor.executeCommand('justifyCenter');




              justifyFull: Justifies the selected content.

              Example: editor.executeCommand('justifyFull');




              justifyLeft: Aligns the selected content to the left.

              Example: editor.executeCommand('justifyLeft');




              justifyRight: Aligns the selected content to the right.

              Example: editor.executeCommand('justifyRight');




              undo: Undoes the last editing operation.

              Example: editor.executeCommand('undo');




              redo: Redoes the previously undone operation.

              Example: editor.executeCommand('redo');




              createLink: Inserts a hyperlink at the current selection. Accepts an object with text, url, and title properties.

              Example: editor.executeCommand('createLink', { text: 'Link', url: 'https://example.com', title: 'Example Link' });




              indent: Increases the indent level of the selected content.

              Example: editor.executeCommand('indent');




              outdent: Decreases the indent level of the selected content.

              Example: editor.executeCommand('outdent');




              insertHTML: Inserts an HTML string at the current cursor position.

              Example: editor.executeCommand('insertHTML', '<p>Text</p>');




              insertOrderedList: Inserts an ordered (numbered) list.

              Example: editor.executeCommand('insertOrderedList');




              insertUnorderedList: Inserts an unordered (bulleted) list.

              Example: editor.executeCommand('insertUnorderedList');




              removeFormat: Removes all formatting from the selected text.

              Example: editor.executeCommand('removeFormat');




              insertText: Inserts plain text at the current cursor position.

              Example: editor.executeCommand('insertText', 'Some text to insert');




              insertImage: Inserts an image at the current cursor position. Accepts an object with a url property.

              Example: editor.executeCommand('insertImage', { url: 'https://www.example.com/image.jpg' });




              Note: Some commands may not be fully supported in all browsers due to the deprecated status of execCommand. Always test your implementation for compatibility with your target browsers.

              Arguments

              commandNamestring

              The name of the command to execute.

              value?string | number

              The value for the command. Some commands require a value to be passed, others do not.

              Returnsboolean

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.executeCommand("fontSize, 17","formatBlock, 'code'");

              expandToolbar(): voidExpands the Toolbar only when the toolbarViewMode property is set to 'toggle'. When this mode is active, the Toolbar will automatically display its full set of options and controls as specified. If toolbarViewMode is set to another value, this expansion behavior will not occur.

              Expands the Toolbar only when the toolbarViewMode property is set to 'toggle'. When this mode is active, the Toolbar will automatically display its full set of options and controls as specified. If toolbarViewMode is set to another value, this expansion behavior will not occur.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.expandToolbar();

              Try a demo showcasing the expandToolbar method.

              exportData( dataFormat: string, callback?: any): voidExports the content of the Editor in your chosen format. Currently supported export formats include HTML, Markdown, and PDF. This allows you to save or share your work in the format that best suits your needs.

              Exports the content of the Editor in your chosen format. Currently supported export formats include HTML, Markdown, and PDF. This allows you to save or share your work in the format that best suits your needs.

              Arguments

              dataFormatstring

              The expected file format.

              callback?any

              A callback that is executed before the data is exported. Allows to modify the output.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.exportData();

              Try a demo showcasing the exportData method.

              focus(): voidSets the input focus to the Editor component, enabling users to interact with and edit its content directly (e.g., by typing or using keyboard shortcuts). This action ensures that keyboard events and commands are directed to the Editor.

              Sets the input focus to the Editor component, enabling users to interact with and edit its content directly (e.g., by typing or using keyboard shortcuts). This action ensures that keyboard events and commands are directed to the Editor.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.focus();

              fullScreenMode( value?: boolean): voidEnables Full Screen Mode for the Editor. When activated, the Editor expands to cover the entire viewport, overlaying all other page content and providing a distraction-free editing environment.

              Enables Full Screen Mode for the Editor. When activated, the Editor expands to cover the entire viewport, overlaying all other page content and providing a distraction-free editing environment.

              Arguments

              value?boolean

              Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.fullScreenMode();

              getCharCount(): numberReturns the total number of characters currently present within the Editor's content, including spaces and special characters.

              Returns the total number of characters currently present within the Editor's content, including spaces and special characters.

              Returnsnumber

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.getCharCount();

              Try a demo showcasing the getCharCount method.

              getHTML(): stringReturns the current content of the Editor as an HTML string. If editMode is set to 'markdown', the raw Markdown input is automatically parsed and converted to HTML before being returned. In all modes, the result is a well-formed HTML representation of the Editor's content, suitable for rendering in web pages or for further processing.

              Returns the current content of the Editor as an HTML string. If editMode is set to 'markdown', the raw Markdown input is automatically parsed and converted to HTML before being returned. In all modes, the result is a well-formed HTML representation of the Editor's content, suitable for rendering in web pages or for further processing.

              Returnsstring

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.getHTML();

              getSelectionRange(): Range | objectReturns the current selection range within the editor. By default, this method returns an object of type Range, which represents the start and end positions of the selection as DOM nodes and offsets. However, if the editMode property is set to 'markdown', the method instead returns a plain object containing the numerical start and end indexes of the selection within the raw text content. This allows for consistent selection handling in both WYSIWYG and markdown editing modes.

              Returns the current selection range within the editor. By default, this method returns an object of type Range, which represents the start and end positions of the selection as DOM nodes and offsets. However, if the editMode property is set to 'markdown', the method instead returns a plain object containing the numerical start and end indexes of the selection within the raw text content. This allows for consistent selection handling in both WYSIWYG and markdown editing modes.

              ReturnsRange | object

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.getSelectionRange();

              getText(): stringReturns the current contents of the Editor component as a plain text string, excluding any formatting or markup. This allows you to retrieve only the raw textual data entered by the user.

              Returns the current contents of the Editor component as a plain text string, excluding any formatting or markup. This allows you to retrieve only the raw textual data entered by the user.

              Returnsstring

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.getText();

              hideLastMessage(): voidConceals or removes the most recently displayed message from view on the user interface, ensuring it is no longer visible to the user.

              Conceals or removes the most recently displayed message from view on the user interface, ensuring it is no longer visible to the user.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.hideLastMessage();

              Try a demo showcasing the hideLastMessage method.

              hideMessage( item?: HTMLElement | string | number): voidConceals a specified message when an identifier is provided; if no identifier is given, all messages will be hidden.

              Conceals a specified message when an identifier is provided; if no identifier is given, all messages will be hidden.

              Arguments

              item?HTMLElement | string | number

              Hides a specific message. The argument can be a DOM reference to a specific item, it's index or it's id. If the argument is not provided then all messages will be closed.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.hideMessage();

              Try a demo showcasing the hideMessage method.

              importData( source: any, settings?: any): voidAllows users to import the contents of a file directly into the Editor. Currently, only plain text (.txt) and HTML (.html) file formats are supported. Upon import, the file’s contents will be automatically loaded and displayed within the Editor for further editing or review.

              Allows users to import the contents of a file directly into the Editor. Currently, only plain text (.txt) and HTML (.html) file formats are supported. Upon import, the file’s contents will be automatically loaded and displayed within the Editor for further editing or review.

              Arguments

              sourceany

              The url to the file or an object that defines settings for the Ajax request like url, timeput, etc. Object format: { url: string, type: string, data: object, timeout: number }

              settings?any

              Additional settings for the ajax request. Such as loadError function, contentType, etc. Format: { contentType: string, beforeSend: Function, loadError: Function, beforeLoadComplete: Function }

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.importData();

              Try a demo showcasing the importData method.

              insertToolbarItem( itemName: any, index: number): voidInserts a new custom Toolbar item into the editor. For example, you can add a button with the following code:```javascripteditor.insertToolbarItem({ name: 'customButton2', // Unique identifier for the toolbar item width: 100, // Specifies the width of the toolbar item in pixels template: 'Button2' // The HTML template that defines the toolbar item's appearance and functionality});```This method allows you to extend the editor’s toolbar by specifying a unique name for the item, its display width, and a custom HTML template, such as a button or other UI component. This makes it easy to add interactive or specialized controls directly to your editor's toolbar.

              Inserts a new custom Toolbar item into the editor.
              For example, you can add a button with the following code:
              ```javascript
              editor.insertToolbarItem({
              name: 'customButton2', // Unique identifier for the toolbar item
              width: 100, // Specifies the width of the toolbar item in pixels
              template: 'Button2' // The HTML template that defines the toolbar item's appearance and functionality
              });
              ```
              This method allows you to extend the editor’s toolbar by specifying a unique name for the item, its display width, and a custom HTML template, such as a button or other UI component. This makes it easy to add interactive or specialized controls directly to your editor's toolbar.

              Arguments

              itemNameany

              The toolbar item to be added

              indexnumber

              The toolbar item's index

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.insertToolbarItem("bold","0");

              loadState(): voidRestores the most recently saved state of the Editor from the browser’s local storage. To identify and retrieve the correct data, an id property must be assigned to the Editor instance. If no saved state exists for the specified id, the Editor will load with its default settings.

              Restores the most recently saved state of the Editor from the browser’s local storage. To identify and retrieve the correct data, an id property must be assigned to the Editor instance. If no saved state exists for the specified id, the Editor will load with its default settings.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.loadState();

              Try a demo showcasing the loadState method.

              previewMode( value?: boolean): voidSwitches the Editor between Source Code and Preview modes. When activated, this mode displays the HTML view panel, allowing users to directly edit or review the underlying HTML code.

              Switches the Editor between Source Code and Preview modes. When activated, this mode displays the HTML view panel, allowing users to directly edit or review the underlying HTML code.

              Arguments

              value?boolean

              Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.previewMode();

              Try a demo showcasing the previewMode method.

              print(): voidOpens the browser’s Print Preview dialog, allowing users to view and print the current content displayed within the Editor. This feature provides a formatted preview of the Editor's contents as they will appear on the printed page before finalizing the print command.

              Opens the browser’s Print Preview dialog, allowing users to view and print the current content displayed within the Editor. This feature provides a formatted preview of the Editor's contents as they will appear on the printed page before finalizing the print command.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.print();

              Try a demo showcasing the print method.

              removeToolbarItem( index: number): voidRemoves a specified item from the Toolbar by its index. For example, editor.removeToolbarItem(0) will remove the first item in the Toolbar. Use this method to dynamically update the Toolbar based on user interaction or application state.

              Removes a specified item from the Toolbar by its index.
              For example, editor.removeToolbarItem(0) will remove the first item in the Toolbar.
              Use this method to dynamically update the Toolbar based on user interaction or application state.

              Arguments

              indexnumber

              The toolbar item's index

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.removeToolbarItem("0");

              saveState(): voidPersists the Editor’s current state to the browser’s local storage, allowing users to restore their work in future sessions. Note: An id property must be assigned to the Editor instance to uniquely identify and manage its saved data.

              Persists the Editor’s current state to the browser’s local storage, allowing users to restore their work in future sessions. Note: An id property must be assigned to the Editor instance to uniquely identify and manage its saved data.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.saveState();

              Try a demo showcasing the saveState method.

              selectAll(): voidHighlights and selects all text currently displayed within the Editor's content area, allowing users to easily copy, cut, or replace the selected text.

              Highlights and selects all text currently displayed within the Editor's content area, allowing users to easily copy, cut, or replace the selected text.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.selectAll();

              selectRange( startIndex: number, endIndex: number): voidEnhancement:"Selects a specified range of text within the Editor based on provided start and end indexes. This method locates the DOM nodes containing the targeted text and creates selection ranges accordingly. Note that only Firefox currently supports selecting multiple, non-contiguous ranges; in other browsers, only the first corresponding node or range will be selected. If the editor is operating in 'html' editMode, the entire content is treated as a single node. As a result, the desired text range will be reliably selected across all browsers in this mode."

              Enhancement:

              "Selects a specified range of text within the Editor based on provided start and end indexes. This method locates the DOM nodes containing the targeted text and creates selection ranges accordingly. Note that only Firefox currently supports selecting multiple, non-contiguous ranges; in other browsers, only the first corresponding node or range will be selected. If the editor is operating in 'html' editMode, the entire content is treated as a single node. As a result, the desired text range will be reliably selected across all browsers in this mode."

              Arguments

              startIndexnumber

              The start index to select from.

              endIndexnumber

              The end index to select to.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.selectRange(2,3);

              Try a demo showcasing the selectRange method.

              setLocale( locale: string, messages?: any): voidSets the locale of a component.

              Sets the locale of a component.

              Arguments

              localestring

              The locale abbreviation. For example: 'de'.

              messages?any

              Object containing the locale messages.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.setLocale("'de'");

              showMessage( message: string, settings?: any): HTMLElement | undefinedDisplays a customizable message within the Editor interface, allowing users to present important information, instructions, or notifications directly inside the editing environment.

              Displays a customizable message within the Editor interface, allowing users to present important information, instructions, or notifications directly inside the editing environment.

              Arguments

              messagestring

              The text message to be displayed.

              settings?any

              Additional settings that can be applied to the Toast element that handles the messages. This parameter should contain only valid Toast properties and values.

              ReturnsHTMLElement | undefined

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.showMessage();

              Try a demo showcasing the showMessage method.

              splitMode( value?: boolean): voidEnables Split Mode in the Editor. When Split Mode is active, both the HTML/Markdown editing panel and the Source Code/Preview panel are displayed side by side, allowing users to simultaneously view and edit the content along with its rendered output or source code. This mode enhances workflow by providing real-time feedback and easier navigation between editing and previewing.

              Enables Split Mode in the Editor. When Split Mode is active, both the HTML/Markdown editing panel and the Source Code/Preview panel are displayed side by side, allowing users to simultaneously view and edit the content along with its rendered output or source code. This mode enhances workflow by providing real-time feedback and easier navigation between editing and previewing.

              Arguments

              value?boolean

              Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              document.querySelector('smart-editor')?.splitMode();

              Try a demo showcasing the splitMode method.

              updateToolbarItem( name: string | number, settings: any): boolean | undefinedEnables the modification of settings for a specified toolbar item. This method returns true if the update is applied successfully, indicating the toolbar item's settings were changed as requested. If the update fails, the method returns false.

              Enables the modification of settings for a specified toolbar item. This method returns true if the update is applied successfully, indicating the toolbar item's settings were changed as requested. If the update fails, the method returns false.

              Arguments

              namestring | number

              The name of the toolbar item or it's index inside the toolbarItems array.

              settingsany

              A settings object for the toolbar item. It should have the same definition as when defining a custom toolbar item. You can read more about it in the dedicated topic for the Editor Toolbar on the website.

              Returnsboolean | undefined

              On the custom element in the DOM (narrow the selector, e.g. to #my-editor, if you host multiple widgets):

              const result = document.querySelector('smart-editor')?.updateToolbarItem();

              CSS Variables

              --smart-editor-default-widthvar()

              Default value

              "100%"

              Default smartEditor width.

              --smart-editor-default-heightvar()

              Default value

              "600px"

              Default smartEditor height.

              --smart-editor-input-min-heightvar()

              Default value

              "100px"

              smartEditor content min height.

              --smart-editor-paddingvar()

              Default value

              "15px"

              smartEditor content padding

              --smart-editor-toolbar-item-marginvar()

              Default value

              "5px"

              smartEditor toolbar item margin.

              --smart-editor-toolbar-button-widthvar()

              Default value

              "30px"

              smartEditor toolbar item button width.

              --smart-editor-toolbar-delimiter-widthvar()

              Default value

              "5px"

              smartEditor toolbar item delimiter width.

              --smart-editor-toolbar-drop-down-width-largevar()

              Default value

              "100px"

              smartEditor large drop down toolbar items width. Used for the following toobar items: 'fontName', 'formats'.

              --smart-editor-toolbar-drop-down-width-smallvar()

              Default value

              "65px"

              smartEditor small drop down toolbar items width. Used for the every toobar item of type 'color-input' and 'drop-down', except the following: 'fontName', 'formats'.

              --smart-editor-window-header-heightvar()

              Default value

              "35px"

              smartEditor Dialog Window header height.

              --smart-editor-window-footer-heightvar()

              Default value

              "50px"

              smartEditor Dialog Window footer height.

              --smart-editor-inline-toolbar-max-widthvar()

              Default value

              "80vw"

              smartEditor Inline Toolbar maximum width.

              --smart-editor-table-column-widthvar()

              Default value

              "initial"

              smartEditor default tables column width.

              --smart-editor-table-cell-min-heightvar()

              Default value

              "20px"

              smartEditor default tables cell min height.

              --smart-editor-table-cell-min-widthvar()

              Default value

              "20px"

              smartEditor default tables cell min width.

              --smart-editor-chart-counter-offsetvar()

              Default value

              "30px"

              smartEditor char counter default offset from the borders of the element.

              --smart-editor-toolbar-item-heightvar()

              Default value

              "30px"

              smartEditor toolbar item height.

              --smart-editor-toolbar-item-border-radiusvar()

              Default value

              "4px"

              smartEditor toolbar item border radius.

              --smart-editor-toolbar-heightvar()

              Default value

              "calc(var(--smart-editor-toolbar-item-height) + 2 * var(--smart-editor-toolbar-padding))"

              smartEditor toolbar height.