Smart.Editor - Methods

Editor Methods

Smart.Editor has a number of methods related to the content or toolbar. The methods can be used at any time after the element's initialization.

• focus - focuses the content editable element inside the Editor.
• blur - blurs the content editable element inside the Editor.
• collapseToolbar - collapses the toolbar of the Editor.
• expandToolbar - expands the toolbar of the Editor.
• disableToolbarItem - disables a toolbar item from the toolbar.
• enableToolbarItem - enables a previously diasbled toolbar item .
• getCharCount - returns the number of characters inside the Editor's content.
• selectAll - selects the content of the Editor.
• clearContent - clears the content of the Editor.
• getHTML - return the current content in HTML format.
• getText - return the current content in text format.
• splitMode - toggles on/off the Split Mode of the Editor. When enabled the Editor's content section is split in half by showing the html content and the source code/preview at the same time.
• previewMode - switches the Editor to source code/preview mode.
• selectRange - creates a text range selection inside the Editor's content. The method takes three arguments:

  selectRange(node: HTMLElement, startIndex: number, endIndex: number)

  The method will select the target node's content from startIndex to endIndex. In markdown mode the node argument is ignored.

• fullScreenMode - enables/disabled Editor's full screen mode. When enabled the Editor is fixed ontop of the screen and takes the whole body size.
• exportData - exports the content of the Editor to a file. The methods takes one argument - the expected file format, for example: 'md', 'txt', 'pdf'.

  component.value.exportData('md')

• print - prepares the Editor's content for printing by opening the browser's print preview. In markdown mode, the markdown preview is prepared for printing.
• executeCommand - executes a command by calling the native execCommand() method affecting the current content selection or inserts content. Supports all native execCommand actions, such as:

  Name	Description	Example
  foreColor	Changes the text color for the selection at the insertion point. Requires a color to be passed as a string agrument to the method.	component.value.executeCommand('foreColor', '#000000');
  hiliteColor	Changes the background color for the selection at the insertion point. Requires a color to be passed as a string agrument to the method.	component.value.executeCommand('hiliteColor', '#000000');
  bold	Toggles bold formatting on/off for the current selection.	component.value.executeCommand('bold');
  italic	Toggles italic formatting on/off for the current selection.	component.value.executeCommand('italic');
  underline	Toggles underline formatting on/off for the current selection.	component.value.executeCommand('underline');
  copy	Copies the current selection to the Clipboard. The behavior of this action varies from one browser to another.	component.value.executeCommand('copy');
  cut	Removes the current selection and copies it to the Clipboard. The behavior of this action varies from one browser to another.	component.value.executeCommand('cut');
  createLink	Inserts a hyperlink at the current cursor position.	component.value.executeCommand('createlink', 'https://www.htmlelements.com');
  delete	Deletes the current selection.	component.value.executeCommand('delete');
  fontSize	Changes the font size of the current selection or the insertion point. Requires an integer from 1 to 7 as a value argument.	component.value.executeCommand('fontSize', 2);
  fontName	Changes the font name of the current selection or the insertion point. Requires an font name to be passed as a value argument.	component.value.executeCommand('fontName', 'Arial');
  formatBlock	Adds an HTML block level element around the line containing the current selection. Requires a node name string to be passed as a value argument.	component.value.executeCommand('formatBlock', 'code');
  heading	Adds a heading element around the current selection or insertion point line. Requires a heading node name string to be passed as the value argument.	component.value.executeCommand('heading', 'h6');
  indent	Indents the current selection or insertion point line.	component.value.executeCommand('indent');
  outdent	Outdents the current selection or insertion point line.	component.value.executeCommand('outdent');
  insertOrderedList	Creates a numbered ordered list for the selection or the insertion point.	component.value.executeCommand('insertOrderedList');
  insertUnorderedList	Creates a billeted unordered list for the selection or the insertion point.	component.value.executeCommand('insertUnorderedList');
  insertText	Inserts plain text at the current selection or cursor position while deleteing the selection ( if any).	component.value.executeCommand('insertText', 'Plain Text inserted');
  insertHorizontalRule	Inserts a <hr> element at the insertion point or replaces the current selection.	component.value.executeCommand('insertHorizontalRule');
  justifyLeft	Justifies the selection or insertion point to the left.	component.value.executeCommand('justifyLeft');
  justifyCenter	Justifies the selection or insertion point to the center.	component.value.executeCommand('justifyCenter');
  justifyRight	Justifies the selection or insertion point to the right.	component.value.executeCommand('justifyRight');
  removeFormat	Removes the formatting of the current selection.	component.value.executeCommand('removeFormat');