Editor Javascript API

Class

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

Properties

Events

Methods

Properties

aiobject

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.

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

 editor.ai.model = 'gpt-4';

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

 let model = editor.ai.model;

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

 editor.ai.maxTokens = 200;

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

 let maxTokens = editor.ai.maxTokens;

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

 editor.ai.temperature = 0.7;

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

 let temperature = editor.ai.temperature;

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

 editor.ai.url = 'https://your-backend.com/ai';

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

 let url = editor.ai.url;

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

 editor.ai.key = 'your-api-key-here';

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

 let key = editor.ai.key;

animation"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

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

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

 editor.animation = 'simple';

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

 let animation = editor.animation;

autoFormattingboolean

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.

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

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

 editor.autoFormatting = false;

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

 let autoFormatting = editor.autoFormatting;

autoLoadboolean

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.

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

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

 editor.autoLoad = false;

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

 let autoLoad = editor.autoLoad;

autoSaveboolean

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.

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

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

 editor.autoSave = false;

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

 let autoSave = editor.autoSave;

autoSaveIntervalnumber

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.

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

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

 editor.autoSaveInterval = 500;

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

 let autoSaveInterval = editor.autoSaveInterval;

charCountFormatFunctionfunction | 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.

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

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

 editor.charCountFormatFunction = function (chars, maxCharCount) { return maxCharCount - chars + 'left';

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

 let charCountFormatFunction = editor.charCountFormatFunction;

autoUploadboolean

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.

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

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

 editor.autoUpload = false;

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

 let autoUpload = editor.autoUpload;

contentFilteringobject

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.

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

 let attributes = editor.contentFiltering.attributes;

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

 let attributeFilterMode = editor.contentFiltering.attributeFilterMode;

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

 let tags = editor.contentFiltering.tags;

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

 let tagFilterMode = editor.contentFiltering.tagFilterMode;

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

 let styleAttributes = editor.contentFiltering.styleAttributes;

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

 let styleAttributeFilterMode = editor.contentFiltering.styleAttributeFilterMode;

content_cssstring

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.

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

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

 editor.content_css = '.red {color: red;}';

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

 let content_css = editor.content_css;

contextMenu"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.

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

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

 editor.contextMenu = 'none';

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

 let contextMenu = editor.contextMenu;

contextMenuDataSourcestring[] | { 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.

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

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

 editor.contextMenuDataSource = ['copy', 'cut', 'paste', 'selectAll'];

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

 let contextMenuDataSource = editor.contextMenuDataSource;

dataExportobject

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.

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

 let style = editor.dataExport.style;

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

 let fileName = editor.dataExport.fileName;

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

 let pageOrientation = editor.dataExport.pageOrientation;

disabledboolean

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.

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

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

 editor.disabled = false;

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

 let disabled = editor.disabled;

disableEditingboolean

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

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

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

 editor.disableEditing = false;

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

 let disableEditing = editor.disableEditing;

disableSearchBarboolean

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

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

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

 editor.disableSearchBar = false;

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

 let disableSearchBar = editor.disableSearchBar;

editMode"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.

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

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

 editor.editMode = 'html,markdown';

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

 let editMode = editor.editMode;

enableHtmlEncodeboolean

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.

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

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

 editor.enableHtmlEncode = false;

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

 let enableHtmlEncode = editor.enableHtmlEncode;

enableTabKeyboolean

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.

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

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

 editor.enableTabKey = false;

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

 let enableTabKey = editor.enableTabKey;

findAndReplaceTimeoutnumber

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.

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

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

 editor.findAndReplaceTimeout = 50;

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

 let findAndReplaceTimeout = editor.findAndReplaceTimeout;

hideToolbarboolean

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.

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

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

 editor.hideToolbar = false;

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

 let hideToolbar = editor.hideToolbar;

hideInlineToolbarboolean

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

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

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

 editor.hideInlineToolbar = false;

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

 let hideInlineToolbar = editor.hideInlineToolbar;

imageFormat"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.

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

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

 editor.imageFormat = 'base64';

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

 let imageFormat = editor.imageFormat;

imagePasteWidthnumber

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

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

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

 editor.imagePasteWidth = 200;

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

 let imagePasteWidth = editor.imagePasteWidth;

imagePasteHeightnumber

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.

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

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

 editor.imagePasteHeight = 200;

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

 let imagePasteHeight = editor.imagePasteHeight;

innerHTMLstring

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.

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

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

 editor.innerHTML = 'Some Other text then ...';

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

 let innerHTML = editor.innerHTML;

inlineToolbarOffsetnumber[]

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.

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

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

 editor.inlineToolbarOffset = [0, -10];

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

 let inlineToolbarOffset = editor.inlineToolbarOffset;

iframeSettingsobject

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.

attributes: { height: 500 }

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

 let attributes = editor.iframeSettings[0].attributes;

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

 let enabled = editor.iframeSettings[0].enabled;

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

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

 let resources = editor.iframeSettings[0].resources;

unlockKeystring

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.

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

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

 editor.unlockKey = '1111-2222-3333-4444-5555';

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

 let unlockKey = editor.unlockKey;

localestring

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.

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

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

 editor.locale = 'fr';

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

 let locale = editor.locale;

maxCharCountnumber

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.

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

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

 editor.maxCharCount = 2000;

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

 let maxCharCount = editor.maxCharCount;

messagesobject

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.

 <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>

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

 editor.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"}};

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

 let messages = editor.messages;

namestring | 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.

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

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

 editor.name = smartEditor;

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

 let name = editor.name;

pasteFormat"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.

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

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

 editor.pasteFormat = 'plainText';

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

 let pasteFormat = editor.pasteFormat;

placeholderstring

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.

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

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

 editor.placeholder = 'Waiting for input...';

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

 let placeholder = editor.placeholder;

removeStylesOnClearFormatboolean

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.

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

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

 editor.removeStylesOnClearFormat = false;

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

 let removeStylesOnClearFormat = editor.removeStylesOnClearFormat;

requiredboolean

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.

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

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

 editor.required = false;

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

 let required = editor.required;

rightToLeftboolean

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.

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

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

 editor.rightToLeft = false;

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

 let rightToLeft = editor.rightToLeft;

sanitizedboolean

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.

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

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

 editor.sanitized = false;

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

 let sanitized = editor.sanitized;

showCharCountboolean

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.

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

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

 editor.showCharCount = true;

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

 let showCharCount = editor.showCharCount;

spellCheckboolean

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.

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

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

 editor.spellCheck = true;

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

 let spellCheck = editor.spellCheck;

splitModeRefreshTimeoutnumber

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.

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

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

 editor.splitModeRefreshTimeout = 50;

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

 let splitModeRefreshTimeout = editor.splitModeRefreshTimeout;

users[]

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.

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

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

 editor.users = [];

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

 let users = editor.users;

enablePagesboolean

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

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

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

 editor.enablePages = true;

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

 let enablePages = editor.enablePages;

pages[]

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).

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

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

 editor.pages = [];

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

 let pages = editor.pages;

uploadUrlstring

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.

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

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

 editor.uploadUrl = 'localhost/fileUpload';

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

 let uploadUrl = editor.uploadUrl;

removeUrlstring

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.

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

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

 editor.removeUrl = 'localhost/fileUpload';

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

 let removeUrl = editor.removeUrl;

themestring

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.

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

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

 editor.theme = 'red';

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

 let theme = editor.theme;

toolbarItemsstring[] | { 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.

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

 let name = editor.toolbarItems[0].name;

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

 let disabled = editor.toolbarItems[0].disabled;

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

 let advanced = editor.toolbarItems[0].advanced;

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

 let dataSource = editor.toolbarItems[0].dataSource;

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

 let inlineToolbarItems = editor.toolbarItems[0].inlineToolbarItems;

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

 let address = editor.toolbarItems[0].address;

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

 let target = editor.toolbarItems[0].target;

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

 let text = editor.toolbarItems[0].text;

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

 let title = editor.toolbarItems[0].title;

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

 let file = editor.toolbarItems[0].file;

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

 let alt = editor.toolbarItems[0].alt;

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

 let url = editor.toolbarItems[0].url;

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

 let width = editor.toolbarItems[0].width;

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

 let height = editor.toolbarItems[0].height;

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

 let caption = editor.toolbarItems[0].caption;

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

 let alignment = editor.toolbarItems[0].alignment;

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

 let display = editor.toolbarItems[0].display;

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

 let draggable = editor.toolbarItems[0].draggable;

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

 let resizable = editor.toolbarItems[0].resizable;

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

 let cols = editor.toolbarItems[0].cols;

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

 let rows = editor.toolbarItems[0].rows;

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

 let tableheader = editor.toolbarItems[0].tableheader;

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

 let altrows = editor.toolbarItems[0].altrows;

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

 let dashedborders = editor.toolbarItems[0].dashedborders;

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

 let editor = editor.toolbarItems[0].editor.editor;

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

 let template = editor.toolbarItems[0].editor.template;

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

 let width = editor.toolbarItems[0].editor.width;

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

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

 editor.toolbarItems = [ "hyperlink", "image", "table"];

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

 let toolbarItems = editor.toolbarItems;

toolbarMode"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.

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

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

 editor.toolbarMode = 'menu';

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

 let toolbarMode = editor.toolbarMode;

toolbarRibbonConfig{ 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.

 <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>

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

 editor.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"]}]}];

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

 let toolbarRibbonConfig = editor.toolbarRibbonConfig;

toolbarViewMode"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.

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

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

 editor.toolbarViewMode = 'scroll';

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

 let toolbarViewMode = editor.toolbarViewMode;

toolbarStickyboolean

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.

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

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

 editor.toolbarSticky = false;

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

 let toolbarSticky = editor.toolbarSticky;

unfocusableboolean

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.

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

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

 editor.unfocusable = false;

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

 let unfocusable = editor.unfocusable;

valuestring

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.

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

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

 editor.value = ''Markdown'';

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

 let value = editor.value;

windowCustomizationFunctionfunction | 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.

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

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

 editor.windowCustomizationFunction = function(target, item) { if (item.name === 'image') { target.headerPosition = 'left'; } };

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

 let windowCustomizationFunction = editor.windowCustomizationFunction;

Events

changeCustomEvent

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

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

	// event handling code goes here.
})

changingCustomEvent

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

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

	// event handling code goes here.
})

actionStartCustomEvent

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

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

	// event handling code goes here.
})

actionEndCustomEvent

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

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

	// event handling code goes here.
})

contextMenuItemClickCustomEvent

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

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

	// event handling code goes here.
})

contextMenuOpenCustomEvent

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

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

	// event handling code goes here.
})

contextMenuOpeningCustomEvent

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

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

	// event handling code goes here.
})

contextMenuCloseCustomEvent

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

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

	// event handling code goes here.
})

contextMenuClosingCustomEvent

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

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

	// event handling code goes here.
})

resizeStartCustomEvent

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

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

resizeEndCustomEvent

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

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

	// event handling code goes here.
})

inlineToolbarOpenCustomEvent

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

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

	// event handling code goes here.
})

inlineToolbarOpeningCustomEvent

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

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

	// event handling code goes here.
})

inlineToolbarCloseCustomEvent

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

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

	// event handling code goes here.
})

inlineToolbarClosingCustomEvent

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

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

	// event handling code goes here.
})

dropDownToolbarOpenCustomEvent

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

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

	// event handling code goes here.
})

dropDownToolbarOpeningCustomEvent

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

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

	// event handling code goes here.
})

dropDownToolbarCloseCustomEvent

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

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

	// event handling code goes here.
})

dropDownToolbarClosingCustomEvent

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

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

	// event handling code goes here.
})

dialogOpenCustomEvent

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

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

	// event handling code goes here.
})

dialogOpeningCustomEvent

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

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

	// event handling code goes here.
})

dialogCloseCustomEvent

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

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

	// event handling code goes here.
})

dialogClosingCustomEvent

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

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

	// event handling code goes here.
})

imageUploadSuccessCustomEvent

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

const editor = document.querySelector('smart-editor');
editor.addEventListener('imageUploadSuccess', function (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.
})

imageUploadFailedCustomEvent

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

const editor = document.querySelector('smart-editor');
editor.addEventListener('imageUploadFailed', function (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.
})

toobarItemClickCustomEvent

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

const editor = document.querySelector('smart-editor');
editor.addEventListener('toobarItemClick', function (event) {
    const detail = event.detail,
        originalEvent = detail.originalEvent,
        value = detail.value;

	// event handling code goes here.
})

messageCloseCustomEvent

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

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

	// event handling code goes here.
})

messageOpenCustomEvent

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

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

	// event handling code goes here.
})

Methods

addToolbarItem( itemName: any): void

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

const editor = document.querySelector('smart-editor');
editor.addToolbarItem("bold");

blur(): void

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.

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

clearContent(): void

Removes all text and formatting from the Editor, resetting its content to an empty state.

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

collapseToolbar(): void

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.

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

disableToolbarItem( itemName: string): void

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.

const editor = document.querySelector('smart-editor');
editor.disableToolbarItem("bold","formats");

expandToolbar(): void

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.

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

enableToolbarItem( itemName: string): void

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.

const editor = document.querySelector('smart-editor');
editor.enableToolbarItem("bold","formats");

executeCommand( commandName: string, value?: string | number): boolean

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' });
  

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

const editor = document.querySelector('smart-editor');
const result = editor.executeCommand("fontSize, 17","formatBlock, 'code'");

focus(): void

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.

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

getCharCount(): number

Returns the total number of characters currently present within the Editor's content, including spaces and special characters.

Returnsnumber

const editor = document.querySelector('smart-editor');
const result = editor.getCharCount();

getSelectionRange(): Range | object

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

const editor = document.querySelector('smart-editor');
const result = editor.getSelectionRange();

getHTML(): string

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

const editor = document.querySelector('smart-editor');
const result = editor.getHTML();

getText(): string

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

const editor = document.querySelector('smart-editor');
const result = editor.getText();

hideMessage( item?: HTMLElement | string | number): void

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.

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

hideLastMessage(): void

Conceals or removes the most recently displayed message from view on the user interface, ensuring it is no longer visible to the user.

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

insertToolbarItem( itemName: any, index: number): void

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

const editor = document.querySelector('smart-editor');
editor.insertToolbarItem("bold","0");

showMessage( message: string, settings?: any): HTMLElement | undefined

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

const editor = document.querySelector('smart-editor');
const result = editor.showMessage();

selectAll(): void

Highlights and selects all text currently displayed within the Editor's content area, allowing users to easily copy, cut, or replace the selected text.

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

selectRange( startIndex: number, endIndex: number): void

"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.

const editor = document.querySelector('smart-editor');
editor.selectRange(2,3);

clearState(): void

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.

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

saveState(): void

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.

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

loadState(): void

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.

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

splitMode( value?: boolean): void

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.

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

previewMode( value?: boolean): void

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.

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

removeToolbarItem( index: number): void

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

const editor = document.querySelector('smart-editor');
editor.removeToolbarItem("0");

fullScreenMode( value?: boolean): void

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.

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

exportData( dataFormat: string, callback?: any): void

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.

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

importData( source: any, settings?: any): void

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 }

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

print(): void

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.

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

updateToolbarItem( name: string | number, settings: any): boolean | undefined

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

const editor = document.querySelector('smart-editor');
const result = editor.updateToolbarItem();

CSS Variables

--smart-editor-default-widthvar()

Default smartEditor width.

--smart-editor-default-heightvar()

Default smartEditor height.

--smart-editor-input-min-heightvar()

smartEditor content min height.

--smart-editor-paddingvar()

smartEditor content padding

--smart-editor-toolbar-item-marginvar()

smartEditor toolbar item margin.

--smart-editor-toolbar-button-widthvar()

smartEditor toolbar item button width.

--smart-editor-toolbar-delimiter-widthvar()

smartEditor toolbar item delimiter width.

--smart-editor-toolbar-drop-down-width-largevar()

smartEditor large drop down toolbar items width. Used for the following toobar items: 'fontName', 'formats'.

--smart-editor-toolbar-drop-down-width-smallvar()

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()

smartEditor Dialog Window header height.

--smart-editor-window-footer-heightvar()

smartEditor Dialog Window footer height.

--smart-editor-inline-toolbar-max-widthvar()

smartEditor Inline Toolbar maximum width.

--smart-editor-table-column-widthvar()

smartEditor default tables column width.

--smart-editor-table-cell-min-heightvar()

smartEditor default tables cell min height.

--smart-editor-table-cell-min-widthvar()

smartEditor default tables cell min width.

--smart-editor-chart-counter-offsetvar()

smartEditor char counter default offset from the borders of the element.

--smart-editor-toolbar-item-heightvar()

smartEditor toolbar item height.

--smart-editor-toolbar-item-border-radiusvar()

smartEditor toolbar item border radius.

--smart-editor-toolbar-heightvar()

smartEditor toolbar height.