Overview

Smart.Editor for React is Smart.Editor is a powerful HTML & Markdown Text Editor for Web Applications. It could be useful for applications like email client, blog edit or a simple web application for exchanging formatted documents within your company. Smart.Editor for React is a text editor with an intuitive user interface that is inspired by popular Editors such as Microsoft® Word, Google email client, etc. Learn about all Editor features here. To get started with the React Editor, see React Editor Docs

Toolbar

Smart.Editor has a Toolbar that contains items which when clicked execute an action. Actions can insert/delete content or apply styles to the current text selection.

Context Menu

Smart.Editor has a built in context menu that is available by default. When the user right clicks with the mouse inside the Editor, the context menu opens. A different options list is displayed depending on the target. However the options list can be customized. See here

Mobile optimized

The React Editor is responsive and has a device-optimized look and behavior on PCs, tablets and mobile phones.

Security

React Editor has a property called 'sanitized', which 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.

Paste Options

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

Find & Replace

The Find and Replace toolbar actions triggers a dialog window that allows to search for a specific text inside Editor's content. The matches found are displayed inside a list box and can be replaced by another string also defined by the user in a separate text box.

Search Bar

An additional Search bar is also available for users who want to quickly find the desired text inside the Editor's content section.

Markdown Editor

Smart.Editor is both an HTML and Markdown editor. By setting the editMode to "markdown" the Editor accepts markdown content that is parsed to HTML in Preview Mode or Split Mode. This allows the users to write markdown files and preview the result and when done simply export the content as MD file via the exportData method.

Keyboard Shortcuts

Improve accessibility with keyboard-only navigation. The React Editor component supports keyboard navigation to help navigate and interact with items. Smart Editor supports the following keyboard shortcuts:

• Insert link - Control + K
• Insert image - Control + Shift + I
• Insert table - Control + Shift + E
• Undo - Control + Z
• Redo - Control + Y
• Copy - Control + C
• Cut - Control + X
• Paste - Control + V
• Bold - Control + B
• Italic - Control + I
• Underline - Control + U
• Strikethrough - Control + Shift + S
• Uppercase - Control + Shift + U
• Lowercase - Control + Shift + L
• Superscript - Control + Shift + =
• Subscript - Control + =
• Indent - Control + ]
• Outdent - Control + [
• Source Code Mode / Preview Mode - Control + Shift + H
• Full Scree Mode - Control + Shift + F
• Justify Center - Control + E
• Justify Full - Control + J
• Justify Left - Control + L
• Justify Right - Control + R
• Clear Format - Control + Shift + R
• Ordered List - Control + Shift + O
• Unordered List - Control + Alt + O

Dialogs

Smart.Editor has built-in dialogs for inserting/editing hyperlinks/tables/images and videos. The Dialog is triggered from the corresponding toolbar item or the context menu. Editor dialogs are very specific so we will cover them one by one in this topic. There are hyperlink dialog, image dialog, table dialog and video dialog.

Single-line Ribbon

The Simplified Ribbon mode (Single-line ribbon) is an additional toolbar rendering option for your web apps.

Tables

Tables The React Editor features full table editing functionality. Built-in tools include:

• Table Dialog
• Create table
• Add row above/below
• Add column left/right
• Delete row/column
• Table Header
• Alternate rows
• Resize Table
• Dashed borders
• Table cell alignment
• Color table headers