Editor JAVASCRIPT UI Component API

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.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

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

Default value

"advanced"

Example

Set the animation property.

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

Set the animation property by using the HTML Element's instance.

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

 editor.animation = 'simple';

Get the animation property.

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

 let animation = editor.animation;

autoLoadboolean

Automatically loads the last saved state of the editor (from local storage) on element initialization. An id must be provided in order to load a previously saved state.

Default value

false

Example

Set the autoLoad property.

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

Set the autoLoad property by using the HTML Element's instance.

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

 editor.autoLoad = false;

Get the autoLoad property.

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

 let autoLoad = editor.autoLoad;

Automatically saves the current content of the editor. Saving happens at time intervas determined by the autoSaveInterval property while the element on focus. An id must be provided to the element in order to store the state.

Default value

false

Example

Set the autoSave property.

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

Set the autoSave property by using the HTML Element's instance.

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

 editor.autoSave = false;

Get the autoSave property.

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

 let autoSave = editor.autoSave;

autoSaveIntervalnumber

The property that determines the interval to automatically save the state of the Editor when the autoSave property is set.

Default value

1000

Example

Set the autoSaveInterval property.

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

Set the autoSaveInterval property by using the HTML Element's instance.

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

 editor.autoSaveInterval = 500;

Get the autoSaveInterval property.

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

 let autoSaveInterval = editor.autoSaveInterval;

charCountFormatFunctionfunction | null

A formatting function for the char counter. Takes two arguments:

chars - the current number of characters inside the Editor.
maxCharCount - the maximum number of characters inside the Editor.

Example

Set the charCountFormatFunction property.

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

Set the charCountFormatFunction property by using the HTML Element's instance.

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

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

Get the charCountFormatFunction property.

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

 let charCountFormatFunction = editor.charCountFormatFunction;

autoUploadboolean

Sets or gets whether files will be automatically uploaded after selection.

Default value

false

Example

Set the autoUpload property.

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

Set the autoUpload property by using the HTML Element's instance.

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

 editor.autoUpload = false;

Get the autoUpload property.

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

 let autoUpload = editor.autoUpload;

contentFilteringobject

Determines the content filtering settings.

Properties

attributesstring[]

Determines which element attributes to filter.

Get the attributes property.

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

 let attributes = editor.contentFiltering.attributes;

attributeFilterMode"blackList" | "whiteList"

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

Default value

"blackList"

Get the attributeFilterMode property.

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

 let attributeFilterMode = editor.contentFiltering.attributeFilterMode;

tagsstring[]

Determines which element tags to filter.

Get the tags property.

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

 let tags = editor.contentFiltering.tags;

tagFilterMode"blackList" | "whiteList"

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

Default value

"blackList"

Get the tagFilterMode property.

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

 let tagFilterMode = editor.contentFiltering.tagFilterMode;

styleAttributesstring[]

Determines which style attributes to filter.

Get the styleAttributes property.

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

 let styleAttributes = editor.contentFiltering.styleAttributes;

styleAttributeFilterMode"blackList" | "whiteList"

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

Default value

"blackList"

Get the styleAttributeFilterMode property.

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

 let styleAttributeFilterMode = editor.contentFiltering.styleAttributeFilterMode;

Try a demo showcasing the contentFiltering property.

contextMenu"default" | "browser" | "none"

Determines the context menu for the Editor. The context menu is triggered when the user right clicks on the content area of the Editor.

Allowed Values

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

Default value

"default"

Try a demo showcasing the contextMenu property.

Example

Set the contextMenu property.

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

Set the contextMenu property by using the HTML Element's instance.

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

 editor.contextMenu = 'none';

Get the contextMenu property.

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

 let contextMenu = editor.contextMenu;

contextMenuDataSourcestring[] | { label: string, value: 'string' }[] | Function | null

Allows to customize default the context menu of the Editor. The property accepts an array of items which can be strings that represent the value of the item, or objects of the following format: { label: string, value: string }, where the label will be displayed and the value will be action value for the item. The property also accepts a function that must return an array of items with the following format function (target: HTMLElement, type: string, defaultItems: string[]) { return defaultItems } and the following arguments:

target - the element that is the target of the context menu.
type - the type of context menu ( whether it's a table, image, link or other)
defaultItems - an array of strings which represent the default items for the context menu.

Example

Set the contextMenuDataSource property.

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

Set the contextMenuDataSource property by using the HTML Element's instance.

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

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

Get the contextMenuDataSource property.

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

 let contextMenuDataSource = editor.contextMenuDataSource;

dataExportobject

Sets the Editor's Data Export options.

Properties

styleobject

Sets a custom style object of the dataExport.

Get the style property.

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

 let style = editor.dataExport.style;

fileNamestring

Sets the exported file's name.

Default value

"smartScheduler"

Get the fileName property.

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

 let fileName = editor.dataExport.fileName;

pageOrientationstring

Sets the page orientation, when exporting to PDF.

Default value

"portrait"

Get the pageOrientation property.

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

 let pageOrientation = editor.dataExport.pageOrientation;

Try a demo showcasing the dataExport property.

disabledboolean

Enables or disables the Editor.

Default value

false

Example

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

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

 editor.disabled = false;

Get the disabled property.

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

 let disabled = editor.disabled;

disableEditingboolean

Disables content editing inside Editor.

Default value

false

Example

Set the disableEditing property.

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

Set the disableEditing property by using the HTML Element's instance.

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

 editor.disableEditing = false;

Get the disableEditing property.

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

 let disableEditing = editor.disableEditing;

disableSearchBarboolean

Disables the Quick Search Bar.

Default value

false

Example

Set the disableSearchBar property.

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

Set the disableSearchBar property by using the HTML Element's instance.

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

 editor.disableSearchBar = false;

Get the disableSearchBar property.

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

 let disableSearchBar = editor.disableSearchBar;

editMode"html" | "markdown"

Determines the edit mode for the Editor. By default the editor's content accepts and parses HTML. However if set to 'markdown' the Editor can be used as a full time Markdown Editor by parsing the makrdown to HTML in preview mode.

Default value

"html"

Example

Set the editMode property.

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

Set the editMode property by using the HTML Element's instance.

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

 editor.editMode = 'html,markdown';

Get the editMode property.

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

 let editMode = editor.editMode;

enableHtmlEncodeboolean

Determines whether the value returned from getHTML method and Source Code view are encoded or not.

Default value

false

Example

Set the enableHtmlEncode property.

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

Set the enableHtmlEncode property by using the HTML Element's instance.

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

 editor.enableHtmlEncode = false;

Get the enableHtmlEncode property.

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

 let enableHtmlEncode = editor.enableHtmlEncode;

enableTabKeyboolean

Determines whether the Tab key can insert tab chars inside the Editor or change focus (default)

Default value

false

Example

Set the enableTabKey property.

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

Set the enableTabKey property by using the HTML Element's instance.

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

 editor.enableTabKey = false;

Get the enableTabKey property.

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

 let enableTabKey = editor.enableTabKey;

findAndReplaceTimeoutnumber

Determines the time interval between results for the find and replace and search bar features.

Default value

Example

Set the findAndReplaceTimeout property.

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

Set the findAndReplaceTimeout property by using the HTML Element's instance.

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

 editor.findAndReplaceTimeout = 50;

Get the findAndReplaceTimeout property.

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

 let findAndReplaceTimeout = editor.findAndReplaceTimeout;

hideToolbarboolean

Determines whether the Toolbar is hidden or not.

Default value

false

Example

Set the hideToolbar property.

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

Set the hideToolbar property by using the HTML Element's instance.

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

 editor.hideToolbar = false;

Get the hideToolbar property.

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

 let hideToolbar = editor.hideToolbar;

hideInlineToolbarboolean

Determines whether the Inline Toolbar is hidden or not.

Default value

false

Example

Set the hideInlineToolbar property.

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

Set the hideInlineToolbar property by using the HTML Element's instance.

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

 editor.hideInlineToolbar = false;

Get the hideInlineToolbar property.

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

 let hideInlineToolbar = editor.hideInlineToolbar;

imageFormat"base64" | "blob"

Determines the file format of the image/video that are uploaded from local storage. By default images/videos are stroed as base64.

Allowed Values

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

Default value

"base64"

Example

Set the imageFormat property.

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

Set the imageFormat property by using the HTML Element's instance.

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

 editor.imageFormat = 'base64';

Get the imageFormat property.

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

 let imageFormat = editor.imageFormat;

innerHTMLstring

Sets the content of the Editor as HTML. Allows to insert text and HTML.

Default value

"en"

Example

Set the innerHTML property.

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

Set the innerHTML property by using the HTML Element's instance.

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

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

Get the innerHTML property.

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

 let innerHTML = editor.innerHTML;

inlineToolbarOffsetnumber[]

Defines an offset(x,y) for the Inline Toolbar positioning on the page.

Default value

[0, -5]

Example

Set the inlineToolbarOffset property.

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

Set the inlineToolbarOffset property by using the HTML Element's instance.

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

 editor.inlineToolbarOffset = [0, -10];

Get the inlineToolbarOffset property.

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

 let inlineToolbarOffset = editor.inlineToolbarOffset;

iframeSettingsobject

Determines the iframe settings of the Editor. When enabled the contents of the Editor are placed inside an iframe, isolated in a separate dom. The element allows to insert external resources into the iframe if needed.

Properties

attributesobject

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

attributes: { height: 500 }

Get the attributes property.

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

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

enabledboolean

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

Default value

false

Get the enabled property.

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

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

resourcesstring

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

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

Default value

"portrait"

Get the resources property.

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

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

Try a demo showcasing the iframeSettings property.

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Try a demo showcasing the locale property.

Example

Set the locale property.

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

Set the locale property by using the HTML Element's instance.

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

 editor.locale = 'fr';

Get the locale property.

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

 let locale = editor.locale;

maxCharCountnumber

Sets a limit on the number of chars inside the Editor.

Try a demo showcasing the maxCharCount property.

Example

Set the maxCharCount property.

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

Set the maxCharCount property by using the HTML Element's instance.

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

 editor.maxCharCount = 2000;

Get the maxCharCount property.

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

 let maxCharCount = editor.maxCharCount;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Default value

"en": {

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

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

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

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

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

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

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

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

"moduleUndefined": "Module is undefined.",

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

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

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

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

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

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

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

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

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

"ok": "Ok",

"cancel": "Cancel",

"alignLeft": "Align Left",

"alignCenter": "Align Center",

"alignRight": "Align Right",

"alignJustify": "Align Justify",

"segoeUi": "Segoe UI",

"arial": "Arial",

"georgia": "Georgia",

"impact": "Impact",

"tahoma": "Tahoma",

"timesNewRoman": "Times New Roman",

"verdana": "Verdana",

"p": "Paragraph",

"pre": "Code",

"code": "Code",

"blockquote": "Quotation",

"h1": "Heading 1",

"h2": "Heading 2",

"h3": "Heading 3",

"h4": "Heading 4",

"h5": "Heading 5",

"h6": "Heading 6",

"bold": "Bold",

"italic": "Italic",

"underline": "Underline",

"strikethrough": "Strikethrough",

"orderedlist": "Ordered List",

"unorderedlist": "Unordered List",

"subscript": "Subscript",

"superscript": "Superscript",

"alignment": "Alignments",

"fontname": "Font Name",

"fontsize": "Font Size",

"formats": "Formats",

"backgroundcolor": "Background Color",

"fontcolor": "Font Color",

"redo": "Redo",

"undo": "Undo",

"indent": "Indent",

"outdent": "Outdent",

"createlink": "Hyperlink",

"hyperlink": "Hyperlink",

"editlink": "Hyperlink",

"removelink": "Remove link",

"openlink": "Open link",

"image": "Image",

"video": "Video",

"table": "Table",

"lowercase": "Lower Case",

"uppercase": "Upper Case",

"print": " Print",

"cut": " Cut",

"copy": " Copy",

"paste": " Paste",

"clearformat": "Clear Format",

"fullscreen": "Full Screen",

"restore": "Restore Screen",

"sourcecode": "Source Code",

"preview": "Preview",

"splitmode": "Split Editor",

"address": "Web Address",

"text": "Display Text",

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

"textPlaceholder": "Enter Text",

"targetPlaceholder": "Select Target",

"titlePlaceholder": "Enter a Title",

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

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

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

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

"videoUrl": "Video URL",

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

"captionPlaceholder": "Caption",

"altPlaceholder": "Alternative Text",

"widthPlaceholder": "auto",

"heightPlaceholder": "auto",

"target": "Open Link in",

"linkBlankDescr": "New Window",

"linkSelfDescr": "Same Window",

"linkParentDescr": "Parent Frame",

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

"linkCustomDescr": "Custom Frame Name",

"title": "Title",

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

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

"width": "Width",

"height": "Height",

"alt": "Alternative Text",

"caption": "Caption",

"display": "Display",

"displayPlaceholder": "Display",

"displayBlock": "Block",

"displayInline": "Inline",

"draggable": "Enable Dragging",

"resizable": "Enable Resizing",

"browse": "Browse",

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

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

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

"totalFiles": "Total files: ",

"cancelFile": "Cancel File",

"dashedborders": "Dashed Borders",

"altrows": "Alternate Rows",

"insertRowBefore": "Insert Row Before",

"insertRowAfter": "Insert Row After",

"deleteRow": "Delete Row",

"insertColumnLeft": "Insert Column Left",

"insertColumnRight": "Insert Column Right",

"deleteColumn": "Delete Column",

"alignTop": "Align Top",

"alignMiddle": "Align Middle",

"alignBottom": "Align Bottom",

"delete": "Delete",

"tablerows": "Table Rows",

"tablecolumns": "Table Columns",

"tablevalign": "Table Cell Vertical Align",

"tablestyle": "Table Style",

"tableheader": "Table Header",

"buttonLabel": "Custom Table",

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

"cols": "Columns",

"rows": "Rows",

"alphabet": "abcdefghijklmnopqrstuvwxyz",

"header": "Header",

"column": "Column",

"plainText": "Plain Text",

"keepFormat": "Keep Format",

"cleanFormat": "Clean Format",

"roleDescription": "Text Editor",

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

"toolbarButtonAriaLabel": "Toolbar Toggle Button",

"primaryToolbarAriaLabel": "Primary Toolbar",

"secondaryToolbarAriaLabel": "Secondary Toolbar",

"inputAriaLabel": "Enter Text",

"homeTab": "Home",

"viewTab": "View",

"insertTab": "Insert",

"layoutTab": "Layout",

"undoGroup": "Undo",

"clipboardGroup": "Clipboard",

"fontGroup": "Font",

"paragraphGroup": "Paragraph",

"editingGroup": "Editing",

"tableGroup": "Tables",

"imageGroup": "Images",

"videoGroup": "Videos",

"linkGroup": "Links",

"viewsGroup": "Views",

"deleteGroup": "Delete",

"findandreplace": "Find and Replace",

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

"tableProperties": "Table Properties",

"imageProperties": "Image Properties",

"videoProperties": "Video Properties",

"linkProperties": "Link Properties",

"selectAll": "Select All",

"deleteTable": "Delete Table",

"deleteImage": "Delete Image",

"deleteVideo": "Delete Video",

"createLink": "Create Link",

"deleteLink": "Delete Link",

"copyImage": "Copy",

"cutImage": "Cut",

"copyVideo": "Copy",

"cutVideo": "Cut",

"find": "Find",

"findPlaceholder": "",

"replace": "Replace",

"replaceWith": "Replace With",

"replaceAll": "Replace All",

"replacePlaceholder": "",

"results": "Results",

"resultsPlaceholder": "No match",

"matchCase": "Match Case",

"searchPlaceholder": "Search..."

}

Example

Set the messages property.

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

Set the messages property by using the HTML Element's instance.

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

Get the messages property.

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

 let messages = editor.messages;

namestring | null

Sets a to the element which can be used to submit the value of the Editor via a form.

Example

Set the name property.

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

Set the name property by using the HTML Element's instance.

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

 editor.name = smartEditor;

Get the name property.

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

 let name = editor.name;

pasteFormat"prompt" | "plainText" | "keepFormat" | "cleanFormat"

Determines the format of the content that will be pasted inside the Editor.

Allowed Values

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

Default value

"keepFormat"

Try a demo showcasing the pasteFormat property.

Example

Set the pasteFormat property.

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

Set the pasteFormat property by using the HTML Element's instance.

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

 editor.pasteFormat = 'plainText';

Get the pasteFormat property.

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

 let pasteFormat = editor.pasteFormat;

placeholderstring

Determines the placeholder that will be shown when there's no content inside the Editor.

Default value

Example

Set the placeholder property.

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

Set the placeholder property by using the HTML Element's instance.

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

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

Get the placeholder property.

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

 let placeholder = editor.placeholder;

removeStylesOnClearFormatboolean

Determines whether the clearFormat toolbar action should also remove inline styles from the currently selected node.

Default value

false

Example

Set the removeStylesOnClearFormat property.

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

Set the removeStylesOnClearFormat property by using the HTML Element's instance.

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

 editor.removeStylesOnClearFormat = false;

Get the removeStylesOnClearFormat property.

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

 let removeStylesOnClearFormat = editor.removeStylesOnClearFormat;

requiredboolean

Determines whether Editor's content is required ot not. If set and the Editor's content is empty, a notification will appear to notify that the Editor cannot be empty.

Default value

false

Try a demo showcasing the required property.

Example

Set the required property.

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

Set the required property by using the HTML Element's instance.

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

 editor.required = false;

Get the required property.

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

 let required = editor.required;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

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

Set the rightToLeft property by using the HTML Element's instance.

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

 editor.rightToLeft = false;

Get the rightToLeft property.

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

 let rightToLeft = editor.rightToLeft;

sanitizedboolean

Determines whether the value is sanitized from XSS content or not. When enabled scripts and other XSS vulnerabilities are not allowed to exist inside the Editor's as HTML content.

Default value

false

Example

Set the sanitized property.

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

Set the sanitized property by using the HTML Element's instance.

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

 editor.sanitized = false;

Get the sanitized property.

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

 let sanitized = editor.sanitized;

showCharCountboolean

Determines whether the char counter is visible or not. When enabled it is displayed in the bottom right corner. If maxCharCount is set and the content characters are equal or more than 70% of the maximum char count the counter is colored in order to warn the user. If the char count is equal or more than 90% the counter is again colored with a different warning color to indicate that the counter is near maximum. When maximum is reached, text input is not allowed.

Default value

false

Try a demo showcasing the showCharCount property.

Example

Set the showCharCount property.

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

Set the showCharCount property by using the HTML Element's instance.

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

 editor.showCharCount = true;

Get the showCharCount property.

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

 let showCharCount = editor.showCharCount;

spellCheckboolean

Determines whether the editor may be checked for spelling errors.

Default value

true

Try a demo showcasing the spellCheck property.

Example

Set the spellCheck property.

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

Set the spellCheck property by using the HTML Element's instance.

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

 editor.spellCheck = true;

Get the spellCheck property.

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

 let spellCheck = editor.spellCheck;

splitModeRefreshTimeoutnumber

Determines the refresh interval for the Source Code/Preview Panel when Split Mode is enabled.

Default value

100

Example

Set the splitModeRefreshTimeout property.

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

Set the splitModeRefreshTimeout property by using the HTML Element's instance.

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

 editor.splitModeRefreshTimeout = 50;

Get the splitModeRefreshTimeout property.

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

 let splitModeRefreshTimeout = editor.splitModeRefreshTimeout;

uploadUrlstring

Sets or gets the upload URL. This property corresponds to the upload form's action attribute. For example, the uploadUrl property can point to a PHP file, which handles the upload operation on the server-side.

Default value

Example

Set the uploadUrl property.

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

Set the uploadUrl property by using the HTML Element's instance.

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

 editor.uploadUrl = 'localhost/fileUpload';

Get the uploadUrl property.

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

 let uploadUrl = editor.uploadUrl;

removeUrlstring

Sets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side.

Default value

Example

Set the removeUrl property.

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

Set the removeUrl property by using the HTML Element's instance.

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

 editor.removeUrl = 'localhost/fileUpload';

Get the removeUrl property.

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

 let removeUrl = editor.removeUrl;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

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

Set the theme property by using the HTML Element's instance.

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

 editor.theme = 'red';

Get the theme property.

 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 }[]

Determines the Toolbar items list. Each item can be string pointing to the name of the item or an object that defines a custom item or adds aditional settings to an item. The name of the items are case insensitive. An object definition should contain a name attribute that refers to the name of the item when modifing an existing toolbar item. The name attribute determines the action of the item. If set to 'custom' it is possible to create a custom toolbar item. If name attribute is not set or not valid it is treated as a separator, no a toolbar item. The following items are supported by default by the Editor:

SourceCode - shows the HTML/Preview Panel by hiding the input panel. Item type - 'Toggle button'.
SplitMode - shows both input and HTML/Preview Panel by splitting the Editor content in two sections. Item type - 'Toggle button'
FullScreen - fits the viewport with the Editor by expanding it over the page content. Item type - 'Toggle button'.
Alignment - aligns the selected content. Item type - 'Drop down'.
FontName - changes the font family of the selected content. Item type - 'drop-down'.
FontSize - changes the font size of the selected content. Item type - 'drop-down'.
Formats - changes the format of the current selection. Itme type - 'drop-down'.
TableRows - allows to insert/remove a row into a selected table element. Item type - 'drop-down'.
TableColumns - allows to insert/remove a column into a selected table element. Itme type - 'drop-down'.
TableVAlign - sets the vertical alignment of a selected table cell. Item type - 'drop-down'.
TableStyle - sets additional styling to a selected table inside the Editor. Item type - 'drop-down'.
BackgroundColor - changes the background color of the current selection. Item type - 'color-input'.
FontColor - changes the font color of the current selection. Item type = 'color-input'.
Bold - sets the currently selected text as bold or not. Item type - 'button'.
Italic - sets the currently selected text as italic. Item type - 'button'.
Underline - sets the currently selected text as underlined. Itme type - 'button'.
Strikethrough - set the currently selected text as strikethrough. Item type - 'button'.
Delete - deletes the current selection. Item type - 'button'.
Undo - undoes the last operation. Item type - 'button'.
Redo - redoes the previous operation. Item type - 'button'.
Indent - indents the current selection once. Item type - 'button'.
Outdent - outdents the current selection once. Item type - 'button'.
OpenLink - triggers a hyperlink. Item type - 'button'.
EditLink - creates/edits the selected hyperlink. Item type - 'button'.
CreateLink - creates/edits the selected hyperlink. Item type - 'button'.
RemoveLink - removes the currently selected hyperlink. Item type - 'button'.
Hyperlink - same as createLink, triggers a Dialog Window for link creation. Item type - 'button'.
Cut - Cuts the currently selected text. Item type - 'button'.
Copy - copies the currently selected text. Item type - 'button'
Paste - pastes the currenly copied/cut text from the Clipboard. Item type = 'button' or 'drop-down' when advanced attribute is set to 'true'.
Image - triggers a Dialog Window to insert/edit an image. Item type - 'button'.
Video - triggers a Dialog Window to insert/edit a video. Item type - 'button'.
LowerCase - changes the current selection to lower case. Item type - 'button'.
UpperCase - changes the current selection to upper case. Item type - 'button'.
Print - opens the browser print preview window. Item type - 'button'.
Caption - insert/remove a caption when a table is selected. Item type - 'button'.
ClearFormat - removes the formatting of the currntly selected text. Item type - 'button'.
Table - triggers a Dialog Window to insert a table. Item type - 'button'.
TableHeader - insert/remove a header row to the currently selected table. Item type - 'button'.
OrderedList - insert/remove an order list. Item type = 'button'.
UnorderedList - insert/remove an unordered list. Item type - 'button'.
Subscript - changes the currently selected text to subscript. Item type - 'button'.
Superscript - changes the currently selected text to superscript. Item type - 'button'.
FindAndReplace - opens a dialog that allows to find and replace text inside the Editor's content section. Item type - 'button'.

The inlineToolbarItems attribute is applicable only to the following items: 'table', 'image', 'hyperlink'. It accepts the same type of value as toolbarItems property but the toolbar items will be placed insinde the Inline Toolbar instead.

Properties

namestring | null

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

Default value

Get the name property.

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

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

disabledboolean | null

Determines whethet the item is disabled or not.

Default value

false

Get the disabled property.

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

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

advancedboolean | null

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

Default value

false

Get the advanced property.

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

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

dataSourcestring[] | object[] | null

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

Get the dataSource property.

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

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

inlineToolbarItemsstring[] | { name?: string, disabled?: boolean, advanced?: boolean, dataSource?: string[] : object[], template?: function | string, width?: string | number }[]

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

Get the inlineToolbarItems property.

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

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

editor{ address?: string, target?: string, text?: string, title?: string, file?: File, url?: string, alt?: string, width?: string | number, height?: string | number, caption?: string, alignment?: string, display?: string, draggable?: boolean, resizable?: boolean, rows?: number, cols?: number, tableheader?: boolean, altrows?: boolean, dashedborders?: boolean } | null

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

Properties

addressstring | null

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

Default value

Get the address property.

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

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

targetstring | null

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

Default value

Get the target property.

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

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

textstring | null

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

Default value

Get the text property.

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

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

titlestring | null

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

Default value

Get the title property.

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

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

fileobject

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

Get the file property.

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

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

altstring | null

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

Default value

Get the alt property.

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

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

urlstring | null

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

Default value

Get the url property.

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

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

widthstring | number

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

Default value

Get the width property.

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

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

heightstring | number

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

Default value

Get the height property.

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

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

captionstring | null

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

Default value

Get the caption property.

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

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

alignmentstring | null

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

Default value

Get the alignment property.

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

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

displaystring | null

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

Default value

Get the display property.

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

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

draggableboolean | null

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

Default value

false

Get the draggable property.

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

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

resizableboolean | null

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

Default value

false

Get the resizable property.

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

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

colsnumber | string | null

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

Default value

Get the cols property.

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

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

rowsnumber | string | null

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

Default value

Get the rows property.

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

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

tableheaderboolean | null

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

Default value

false

Get the tableheader property.

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

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

altrowsboolean | null

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

Default value

false

Get the altrows property.

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

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

dashedbordersboolean | null

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

Default value

false

Get the dashedborders property.

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

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

Get the editor property.

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

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

templatefunction | string | null

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

Get the template property.

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

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

widthnumber | string | null

Determines the width of the toolbar item.

Default value

Get the width property.

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

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

Try a demo showcasing the toolbarItems property.

Example

Set the toolbarItems property.

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

Set the toolbarItems property by using the HTML Element's instance.

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

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

Get the toolbarItems property.

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

 let toolbarItems = editor.toolbarItems;

toolbarMode"menu" | "singleLineRibbon"

Determines the toolbar mode of the Editor. The main toolbar of the Editor can appear as a Ribbon or as a Menu.

Allowed Values

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

Default value

"menu"

Try a demo showcasing the toolbarMode property.

Example

Set the toolbarMode property.

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

Set the toolbarMode property by using the HTML Element's instance.

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

 editor.toolbarMode = 'menu';

Get the toolbarMode property.

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

 let toolbarMode = editor.toolbarMode;

toolbarRibbonConfig{ name: string, groups: { name: string, items: string[] }[] }[]

Allows to configure the SingleLineRibbon appearance by changing the order and items of the groups.

Default value

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

Example

Set the toolbarRibbonConfig property.

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

Set the toolbarRibbonConfig property by using the HTML Element's instance.

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

Get the toolbarRibbonConfig property.

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

 let toolbarRibbonConfig = editor.toolbarRibbonConfig;

toolbarViewMode"toggle" | "multiRow" | "scroll"

Determines the format of the content that will be pasted inside the Editor.

Allowed Values

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

Default value

"toggle"

Try a demo showcasing the toolbarViewMode property.

Example

Set the toolbarViewMode property.

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

Set the toolbarViewMode property by using the HTML Element's instance.

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

 editor.toolbarViewMode = 'scroll';

Get the toolbarViewMode property.

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

 let toolbarViewMode = editor.toolbarViewMode;

toolbarStickyboolean

Sticks the Toolbar to the top of the window and stays there while scrolling.

Default value

false

Example

Set the toolbarSticky property.

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

Set the toolbarSticky property by using the HTML Element's instance.

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

 editor.toolbarSticky = false;

Get the toolbarSticky property.

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

 let toolbarSticky = editor.toolbarSticky;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

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

 editor.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = editor.unfocusable;

valuestring

Sets or gets the value of the Editor.

Default value

""""

Example

Set the value property.

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

Set the value property by using the HTML Element's instance.

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

 editor.value = '**Markdown**';

Get the value property.

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

 let value = editor.value;

windowCustomizationFunctionfunction | null

A function that can be used to completly customize the Editor dialog that is used to insert/edit tables/images/videos/hyperlinks. The function accepts two arguments:

target - the target dialog that is about to be opened.
item - the toolbar item object that trigger the dialog.

Example

Set the windowCustomizationFunction property.

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

Set the windowCustomizationFunction property by using the HTML Element's instance.

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

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

Get the windowCustomizationFunction property.

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

 let windowCustomizationFunction = editor.windowCustomizationFunction;

Events

changeCustomEvent

This event is triggered on blur if the content is changed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.oldValue - The old value before the change.

ev.detail.value - The new value after the change.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of change event.

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 after user input to indicate that the content is changed via user interaction.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onChanging

Arguments

evCustomEvent

ev.detailObject

ev.detail.oldValue - The old value before the input change.

ev.detail.value - The new value after the input change.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of changing event.

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 triggered before a Toolbar action is started. The event can be canceled via event.preventDefault().

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onActionStart

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of actionStart event.

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 when a Toolbar action has ended.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onActionEnd

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of actionEnd event.

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 Context menu item has been clicked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onContextMenuItemClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.originalEvent - The original click event.

ev.detail.value - The value of the item.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuItemClick event.

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 when the Context Menu is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onContextMenuOpen

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.owner - The tooltip target (the owner of the tooltip).

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuOpen event.

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 when the Context Menu is opening. The opening operation can be canceled via event.preventDefault().

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onContextMenuOpening

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuOpening event.

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 when the Context Menu is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onContextMenuClose

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.owner - The tooltip target (the owner of the tooltip).

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuClose event.

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 triggered when the Context Menu is closing. The closing operation can be canceled via event.preventDefault().

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onContextMenuClosing

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuClosing event.

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 an image/table/video resizing has started.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeStart

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of resizeStart event.

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

resizeEndCustomEvent

This event is triggered when an image/table/video resizing has ended.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeEnd

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of resizeEnd event.

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 when the inline Toolbar is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onInlineToolbarOpen

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.owner - The tooltip target (the owner of the tooltip).

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of inlineToolbarOpen event.

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 triggered when the inline Toolbar is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onInlineToolbarOpening

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of inlineToolbarOpening event.

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 when the inline Toolbar is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onInlineToolbarClose

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.owner - The tooltip target (the owner of the tooltip).

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of inlineToolbarClose event.

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 when the inline Toolbar is closing.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onInlineToolbarClosing

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of inlineToolbarClosing event.

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 when the Drop Down Toolbar is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDropDownToolbarOpen

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.owner - The tooltip target (the owner of the tooltip).

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dropDownToolbarOpen event.

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 when the Drop Down Toolbar is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDropDownToolbarOpening

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dropDownToolbarOpening event.

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 when the Drop Down Toolbar is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDropDownToolbarClose

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.owner - The tooltip target (the owner of the tooltip).

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dropDownToolbarClose event.

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 triggered when the Drop Down Toolbar is closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDropDownToolbarClosing

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dropDownToolbarClosing event.

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 the Dialog Window is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDialogOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The window that is the target of the operation.

ev.detail.item - The toolbar item is the target of the operation.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dialogOpen event.

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 triggered before the Dialog Window is opened. The event can be prevented via event.preventDefault().

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDialogOpening

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The window that is the target of the operation.

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dialogOpening event.

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 when the Dialog Window is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDialogClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The window that is the target of the operation.

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dialogClose event.

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 triggered before the Dialog Window is closing. The event can be prevented via event.preventDefault().

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDialogClosing

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The window that is the target of the operation.

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dialogClosing event.

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 the uploading of an image/video is successful.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onImageUploadSuccess

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The file upload element that is the target of the operation.

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

ev.detail.filename - The name of the uploaded file.

ev.detail.type - The type of the uploaded file.

ev.detail.size - The size of the uploaded file.

ev.detail.index - The index of the uploaded file.

ev.detail.status - The status of the uploaded file. Whether there was an error or success.

ev.detail.serverResponse - The response of the remote server.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of imageUploadSuccess event.

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 the uploading of an image/video is unsuccessful.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onImageUploadFailed

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The file upload element that is the target of the operation.

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

ev.detail.filename - The name of the canceled file.

ev.detail.type - The type of the canceled file.

ev.detail.size - The size of the canceled file.

ev.detail.index - The index of the canceled file.

ev.detail.status - The status of the uploaded file. Whether there was an error or success.

ev.detail.serverResponse - The response of the remote server.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of imageUploadFailed event.

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 when a Toolbar item is clicked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onToobarItemClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.originalEvent - The original click event.

ev.detail.value - The name of the toolbar item that was clicked.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of toobarItemClick event.

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 when a message is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onMessageClose

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of messageClose event.

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 when a message is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onMessageOpen

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of messageOpen event.

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

Adds a new Toolbar item. Example: editor.addToolbarItem({ name: 'customButton2', width: 100, template: '<smart-button>Button2</smart-button>' })

Arguments

itemNameany

The toolbar item to be added

Invoke the addToolbarItem method.

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

blur(): void

Blurs the content of the Editor.

Invoke the blur method.

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

clearContent(): void

Clears the content of the Editor.

Invoke the clearContent method.

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

collapseToolbar(): void

Collapse the Toolbar if the toolbarViewMode is set to 'toggle'.

Invoke the collapseToolbar method.

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

disableToolbarItem( itemName: string): void

Disables a Toolbar item.

Arguments

itemNamestring

The name of the toolbar item to disable.

Invoke the disableToolbarItem method.

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

expandToolbar(): void

Expand the Toolbar if the toolbarViewMode is set to 'toggle'.

Invoke the expandToolbar method.

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

enableToolbarItem( itemName: string): void

Enables a previously disabled Toolbar item.

Arguments

itemNamestring

The name of the toolbar item to enable.

Invoke the enableToolbarItem method.

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

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

Executes a command via the native execCommand method. The method returns true or false depending on whether the execution was successful or not. The following list of commands can be eexecuted:

bold - makes the currently selected content bold. Example: editor.executeCommand('bold');
italic - makes the currently selected content italic. Example: editor.executeCommand('italic');
undelined - makes the currently selected content underlined. Example: editor.executeCommand('underline');
strikeThrough - applies a single line strike through formatting to the currently selected content. Example: editor.executeCommand('strikeThrough');
superscript - sets the selected content as superscript. Example: editor.executeCommand('superscript');
subscript - sets the selected content as superscript. Example: editor.executeCommand('subscript');
uppercase - changes the case of the current selection to upper. Example: editor.executeCommand('uppercase');
lowercase - changes the case of the current selection to lower. Example: editor.executeCommand('lowercase');
foreColor - changes the font color of the current content selection. Example: editor.executeCommand('foreColor', '#000000');
fontName - changes the font name for the selected content. Example: editor.executeCommand('fontName', 'Arial');
fontSize - changes the font size of the currently selected content. Example: editor.executeCommand('fontSize', '15px');
hiliteColor - changes the background color of current selection. Example: editor.executeCommand('hiliteColor', '#000000');
justifyCenter - aligns the content to the center. Example: editor.executeCommand('justifyCenter');
justifyFull - aligns the content to be fully justified. Example: editor.executeCommand('justifyFull');
justifyLeft - aligns the content to the left. Example: editor.executeCommand('justifyLeft');
justifyRight - aligns the content to the right. Example: editor.executeCommand('justifyRight');
undo - allows to undo the previous action. Example: editor.executeCommand('undo');
redo - allows to redo the previous actions. Example: editor.executeCommand('redo');
createLink - creates a hyperlink in the content section of the Editor. Example: editor.executeCommand('createLink', { text: 'Links', url: 'http://', title : 'Link' });
indent - indents the content with one level. Example: editor.executeCommand('indent');
outdent - outdents the content with one level. Example: editor.executeCommand('outdent');
insertHTML - insert an HTML content as string at the current cursor location. Example: editor.executeCommand('insertHTML', '
Text
');
insertOrderedList - inserts a new numbered list item. Example: editor.executeCommand('insertOrderedList');
insertUnorderedList - inserts a new bulleted list item. Example: editor.executeCommand('insertUnorderedList');
removeFormat - removes the formatting styles from currently selected text. Example: editor.executeCommand('removeFormat');
insertText - inserts a text at the current cursor location. Example: editor.executeCommand('insertText', 'Some text to insert');
insertImage - inserts an image at the current cursor location. Example: editor.executeCommand('insertImage', { url: 'https://www.htmlelements.com/demos/images/carousel-medium-2.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

Invoke the executeCommand method.

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

focus(): void

Focuses the content of the Editor.

Invoke the focus method.

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

getCharCount(): number

Returns the number of characters inside the Editor's content.

Returnsnumber

Invoke the getCharCount method.

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

getSelectionRange(): Range | object

Returns the current selection range. By default the result is an object of type Range, but if the editMode property is set to 'markdown' the returned value is an object indicating the start/end indexes of the current selection.

ReturnsRange | object

Invoke the getSelectionRange method.

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

getHTML(): string

Returns the content of the Editor as HTML. When editMode is set to 'markdown' the markdown is parsed and returned as HTML.

Returnsstring

Invoke the getHTML method.

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

getText(): string

Returns the content of the Editor as text.

Returnsstring

Invoke the getText method.

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

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

Hides a specific message or all messages if no argument is provided.

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.

Invoke the hideMessage method.

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

hideLastMessage(): void

Hides the last shown message.

Invoke the hideLastMessage method.

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

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

Inserts a new Toolbar item. Example: editor.insertToolbarItem({ name: 'customButton2', width: 100, template: '<smart-button>Button2</smart-button>' })

Arguments

itemNameany

The toolbar item to be added

indexnumber

The toolbar item's index

Invoke the insertToolbarItem method.

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

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

Shows a custom message inside the Editor.

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

Invoke the showMessage method.

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

selectAll(): void

Selects the text inside Editor's content.

Invoke the selectAll method.

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

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

Selects a range of text inside the Editor. The method will find the nodes containing the text from the start to the end indexes and will select them as ranges. However, currently only FireFox supports multiple range selection. The rest of the browsers will only select the first node. If the editor is in 'html' editMode then the expected text will be selected regardless of the browser because there's only one node inside the editor.

Arguments

startIndexnumber

The start index to select from.

endIndexnumber

The end index to select to.

Invoke the selectRange method.

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

clearState(): void

Clears the local storage from previously stored states of the Editor with the current id.

Invoke the clearState method.

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

saveState(): void

Saves the current state of the Editor to local storage. Requires an id to be set to the Editor.

Invoke the saveState method.

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

loadState(): void

Loads the last stored state of the Editor from local storage. Requires an id to be set to the Editor.

Invoke the loadState method.

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

splitMode( value?: boolean): void

Sets Editor into Split Mode. In split mode the HTML/Markdown editor and SourceCode/Preview panels are visible.

Arguments

value?boolean

Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.

Invoke the splitMode method.

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

previewMode( value?: boolean): void

Sets Editor into SourceCode/Preview Mode. In this mode the HTML view panel is displayed.

Arguments

value?boolean

Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.

Invoke the previewMode method.

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

removeToolbarItem( index: number): void

Removes a Toolbar item. Example: editor.removeToolbarItem(0)

Arguments

indexnumber

The toolbar item's index

Invoke the removeToolbarItem method.

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

fullScreenMode( value?: boolean): void

Sets Editor into Full Screen Mode. If enabled the Editor is positioned above the page content and fills the screen.

Arguments

value?boolean

Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.

Invoke the fullScreenMode method.

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

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

Exports the content of the Editor in the desired format. The currently supported formats are: HTML, Markdown and PDF.

Arguments

dataFormatstring

The expected file format.

callback?any

A callback that is executed before the data is exported. Allows to modify the output.

Invoke the exportData method.

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

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

Imports the content of a file to the Editor. The currently supported formats are: TXT or HTML.

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 }

Invoke the importData method.

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

print(): void

Opens the Print Preview Panel of the Browser to print Editor's content.

Invoke the print method.

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

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

Allows to update the settings of a single toolbar item. The method returns true if successful.

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

Invoke the updateToolbarItem method.

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

CSS Variables

--smart-editor-default-widthvar()

Default value

"100%"

Default smartEditor width.

--smart-editor-default-heightvar()

Default value

"600px"

Default smartEditor height.

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

Default value

"100px"

smartEditor content min height.

--smart-editor-paddingvar()

Default value

"15px"

smartEditor content padding

Default value

"5px"

smartEditor toolbar item margin.

Default value

"30px"

smartEditor toolbar item button width.

Default value

"5px"

smartEditor toolbar item delimiter width.

Default value

"100px"

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

Default value

"65px"

smartEditor small drop down toolbar items width. Used for the every toobar item of type 'color-input' and 'drop-down', except the following: 'fontName', 'formats'.

--smart-editor-window-header-heightvar()

Default value

"35px"

smartEditor Dialog Window header height.

Default value

"50px"

smartEditor Dialog Window footer height.

Default value

"80vw"

smartEditor Inline Toolbar maximum width.

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

Default value

"initial"

smartEditor default tables column width.

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

Default value

"20px"

smartEditor default tables cell min height.

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

Default value

"20px"

smartEditor default tables cell min width.

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

Default value

"30px"

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

Default value

"30px"

smartEditor toolbar item height.

Default value

"4px"

smartEditor toolbar item border radius.

Default value

"calc(var(--smart-editor-toolbar-item-height) + 2 * var(--smart-editor-toolbar-padding))"

smartEditor toolbar height.

Editor Javascript API

animation"none" | "simple" | "advanced"

Default value

Example

autoLoadboolean

Default value

Example

autoSaveboolean

Default value

Example

autoSaveIntervalnumber

Default value

Example

charCountFormatFunctionfunction | null

Example

autoUploadboolean

Default value

Example

contentFilteringobject

Properties

attributesstring[]

attributeFilterMode"blackList" | "whiteList"

Default value

tagsstring[]

tagFilterMode"blackList" | "whiteList"

Default value

styleAttributesstring[]

styleAttributeFilterMode"blackList" | "whiteList"

Default value

contextMenu"default" | "browser" | "none"

Default value

Example

contextMenuDataSourcestring[] | { label: string, value: 'string' }[] | Function | null

Example

dataExportobject

Properties

styleobject

fileNamestring

Default value

pageOrientationstring

Default value

disabledboolean

Default value

Example

disableEditingboolean

Default value

Example

disableSearchBarboolean

Default value

Example

editMode"html" | "markdown"

Default value

Example

enableHtmlEncodeboolean

Default value

Example

enableTabKeyboolean

Default value

Example

findAndReplaceTimeoutnumber

Default value

Example

hideToolbarboolean

Default value

Example

hideInlineToolbarboolean

Default value

Example

imageFormat"base64" | "blob"