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'. 
    editor.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. 
    editor.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. 
    editor.executeCommand('hiliteColor', '#000000');
    bold Toggles bold formatting on/off for the current selection. 
    editor.executeCommand('bold');
    italic Toggles italic formatting on/off for the current selection. 
    editor.executeCommand('italic');
    underline Toggles underline formatting on/off for the current selection. 
    editor.executeCommand('underline');
    copy Copies the current selection to the Clipboard. The behavior of this action varies from one browser to another. 
    editor.executeCommand('copy');
    cut Removes the current selection and copies it to the Clipboard. The behavior of this action varies from one browser to another. 
    editor.executeCommand('cut');
    createLink Inserts a hyperlink at the current cursor position. 
    editor.executeCommand('createlink', 'https://www.htmlelements.com');
    delete Deletes the current selection. 
    editor.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. 
    editor.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. 
    editor.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. 
    editor.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. 
    editor.executeCommand('heading', 'h6');
    indent Indents the current selection or insertion point line. 
    editor.executeCommand('indent');
    outdent Outdents the current selection or insertion point line. 
    editor.executeCommand('outdent');
    insertOrderedList Creates a numbered ordered list for the selection or the insertion point. 
    editor.executeCommand('insertOrderedList');
    insertUnorderedList Creates a billeted unordered list for the selection or the insertion point. 
    editor.executeCommand('insertUnorderedList');
    insertText Inserts plain text at the current selection or cursor position while deleteing the selection ( if any). 
    editor.executeCommand('insertText', 'Plain Text inserted');
    insertHorizontalRule Inserts a <hr> element at the insertion point or replaces the current selection. 
    editor.executeCommand('insertHorizontalRule');
    justifyLeft Justifies the selection or insertion point to the left. 
    editor.executeCommand('justifyLeft');
    justifyCenter Justifies the selection or insertion point to the center. 
    editor.executeCommand('justifyCenter');
    justifyRight Justifies the selection or insertion point to the right. 
    editor.executeCommand('justifyRight');
    removeFormat Removes the formatting of the current selection. 
    editor.executeCommand('removeFormat');