smart-html-elements

Smart.Editor Methods

JavaScript

Angular

Vue

React

Editor for React

React version of this topic (compatible with React 19+). Keep the same configuration logic from JavaScript and pass it as component props.

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

import React, { useMemo, useRef } from 'react';
import { Editor } from 'smart-webcomponents-react/editor';
import 'smart-webcomponents-react/source/styles/smart.default.css';

export default function App() {
  const componentRef = useRef(null);
  const componentProps = useMemo(() => ({
    // Copy this topic's JavaScript configuration here.
  }), []);

  return <Editor ref={componentRef} {...componentProps}></Editor>;
}

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

For AI tooling

Developer Quick Reference

Topic: editor-methods Component: Editor Framework: React

Main methods: exportData(), executeCommand()

Common config keys: (none detected)

Implementation Notes

Compatibility: React 19+ API access pattern: const componentRef = useRef(null) + componentRef.current.method()

Lifecycle guidance: Use useMemo for large config objects and call imperative API through componentRef.current after first render.

Common pitfalls:

Recreating columns/dataSource objects on every render can reset component state.
Calling API methods before ref is available causes runtime errors.
Mixing controlled and imperative updates without sync can lead to stale UI.

Validation checklist:

Keep config objects memoized when possible.
Guard API calls with ref existence checks.
Verify CSS theme import is present once per app.

Editor for React

Smart.Editor - Methods

Editor Methods