Modular Text & Docs Editor Plugin

Introduction

The next generation block-styled editor. This plugin's workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, this plugin outputs JSON objects with data of each Block.
Key features:
  • block-styled editor
  • clean data output in JSON (Note: Data source of the plugin element should be in a JSON format only)
  • easy to use

Link Tool

Allows to add link previews to your articles.
Image without caption

Image Tool

Works only with pasted image URLs.
You can add a border, stretch it to full width, and add a title to it.
Image without caption

Quote Tool

Provides Quote Blocks, select text and click on the quote icon. You can add the quote author name in plugin settings or directly on the page.
Image without caption
You can choose alignment for the quote. It takes no effect while editing but saved the Β«alignmentΒ» param.

Header Tool

Image without caption

List Tool

This Tool for Editor.js allows you to add ordered or unordered (bulleted) lists to your article.
Image without caption

Marker Tool

Image without caption

Warning Tool

Provides Warning Block. Block has a title and message with a warning icon. It can be used, for example, for editorial notifications or appeals.

Embed Tool

The tool uses Editor.js pasted patterns handling and inserts iframe with embedded content. Supporting services: YouYube, Coub, Imgur, Gfycat, twitch-video, twitch-channel, Vimeo, Yandex-music-track, Yandex-music-album, Yandex-music-playlist

Raw HTML Tool for Editor.js

Raw Tool for the Editor.js allows you to include raw HTML code in your articles.
Image without caption

Checklist Tool for Editor.js

This Tool for Editor.js allows you to add checklists to your texts.
Image without caption

Delimiter Tool for Editor.js

Adds a simple delimiter.
Image without caption

Table tool

Simply click on the + icon to add a row or a column.
Image without caption

InlineCode highlight

Inline Tool for marking code-fragments
Image without caption

Enable Read Only? (New)

Checkbox for enabling/disable read-only mode for all your Blocks
Image without caption

How to setup

  1. Install the plugin from the bubble editor plugins tab
Image without caption
2. Place the plugin element on the page to get access to plugin actions, events, and plugin element proprieties
Image without caption
3. Set the element proprieties as needed
4. Add events or actions in the workflow for your scenario. Done!

Plugin Element Proprieties

This plugin has one visual element Editorjs which should be used on the page.
Image without caption

Element Actions

1. Save Changes
Save the last changes.
2. Set Caret Position
Action provides methods to work with Caret's built-in class.
You can choose one of three positions: Focus At the beginning At the end
3. Refresh
Clear the Editor's content and push new content.
4. Clear
Clear Editor's content. The method removes all Blocks and inserts new initial empty Block
5. Read Only Mode (NEW)
Enable/disable read-only mode. If checked, all your blocks will be read-only and you won't be able to make any changes to it.

Element Events

  1. An Editorjs Error - when an editor error happens event
  1. An Editorjs Content is changed - an event to handle when content is changed
  1. An Editorjs Content is ready - an event to handle the content when is ready

Workflow example

As an example we will use the Set carret action on the button click to use this feature by focusing on the editor.
  1. Place the plugin element on the page and a button
Image without caption
2. Go to the workflow tab, add an event when the button is clicked to set focus on the editor
Image without caption
3. Done! Now when clicking on the button it will focus on the editor

Changelogs

Update: 05/11/2020 –
  • Added new element property and action "Read-only mode"
Update: 28/01/2022 - Version 1.9.0
  • Added image upload and fixed inline toolbar
Update: 10/03/2022 - Version 1.10.0
  • fixed autosaving issue
Update: 17/11/2022 - Version 1.11.0
  • Adapted to the new responsive engine and added "Fit height to content” option
Update: 23/01/2023 - Version 1.12.0
  • Fixed elements overlapping & replaced the "Fit height to content" checkbox in the "Layout" tab
Update: 25/05/23 - Version: 1.19.0
  • Fixed resize content in the element.
Update: 26/07/23 - Version: 1.22.0
  • Fixed "Refresh" and "Clear" actions
Update: 10/08/23 - Version: 1.23.0
  • Fixed "Refresh" action
Update: 31/03/24 - Version: 1.28.0
  • Fixed minor bugs with link preview and content saving.

Demo to preview the settings