ElasticEditor

Easy-to-reuse content editor for any React project. Allowing your users to create rich content is a hard problem and ElasticEditor solves it for you. ElasticEditor allows you to easily add user generated rich content to your product. ElasticEditor generates semantic, accessible, easily styled HTML for you.

Features

Allows users to create rich content with the following elements:

Text Elements

• Paragraphs
• Block Quotes
• Headings
• Lists (Bulleted and Ordered)

Text Formatting

Allows users to format text in the following ways:

• Styling (Bold, Italics, Underline and Strikethrough)
• Alignment (Left, Center, Right and Justify)
• Color

Undo/Redo

Allows users to easily edit their work without worry by undoing/redoing recent changes.

Themes (Light & Dark)

Allows users to theme their rich content in both Light and Dark Themes. This can be controlled or automatic.

Toolbar Modes

Style the toolbar as hovering above the content, positioned the top/bottom of the editor, or turned of entirely.

Export to Text & Markdown

Serializers, such asexportToPlaintext and exportToMarkdown, offer users a way to reuse their content by converting it into popular forms.

Component API

ElasticEditor

readOnly

• Renders the editor in read only (or edit) mode.
• Values: true or false

onChange

• Function that's called whenever there is a change in the editor's content.

toolbarMode

• Configures the location and style of the editor's toolbar.
• Values: "hover", "top", "bottom", "none"

theme (optional):

• Renders editor and content in whatever Theme the user configures.
• Values: See "Theme" type definition

themeType (optional):

• Manually controls which theme (light or dark) is shown in the editor
• Values: See "ThemeTypes" definition

content (optional):

• Rich content to be rendered by Editor. When not passed, an empty document is created.

Serializer API

exportToPlaintext

Converts a list of ElasticElement nodes from ElasticEditor into Plaintext.

function exportToPlaintext(nodes: ElasticElement[]): string {}

exportToMarkdown

Converts a list of ElasticElement nodes from ElasticEditor into Markdown.

function exportToMarkdown(nodes: ElasticElement[]): string {}