Smart.Editor Methods
JavaScriptJavaScriptAngularAngularVueVueReactReact

Editor for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { EditorComponent, EditorModule } from 'smart-webcomponents-angular/editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, EditorModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('editor', { read: EditorComponent, static: false }) editor!: EditorComponent;
}
<!-- app.component.html -->
<smart-editor #editor></smart-editor>

Use this.editor for API methods in this topic.

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

Developer Quick Reference

Topic: editor-methods   Component: Editor   Framework: Angular

Main methods: exportData(), executeCommand()

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.