Demo

You can see the demo of the functionality on this page and the read-only editor here.

High-level app flow

Use this Rich Text Editor to produce HTML output that can be used in pages like blog posts, articles, or forums.

Usage

Editor.js elements have 2 exposed states:

• JSON Output

• HTML Output

The JSON Output is used to save the content and allow the user to edit it later.

HTML Output is used to display the content to other users, or to preview what that content will look like to other users.

If you only save the HTML Output, the user will not be able to load it back into the Editor.js editor. And if you only save the JSON Output, you'd need to load it into the editor in order to generate the appropriate HTML and show it, which is not ideal if the user doesn't need to edit the content anyway.

Block types

In Editor.js there are a number of different blocks that have different displays. The ones which are included with this plugin are:

• Headers

• Text

  • Marker/highlighter and Code displays

• Image (with caption)

• Bulleted list

• Numbered list

• Checklist

• Warning

• Delimiter

• Table

• Embed (paste a YouTube video, could add CodePen to this in the future)

Styles

The AirDev Canvas styles are used for this plugin's content. These styles are included in the page header across the app if the Editor.js plugin is installed.