31min

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 object 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

Allows to add link previews to your articles.

Document image

Image Tool

Works only with pasted image URLs.

You can add a border, stretch to full width and add a title to it.

Document image

Quote Tool

Provides Quote Blocks, select text and click on the quote icon. You can add quote author name in plugin settings or directly on the page.

Document image



You can choose alignment for the quote. It takes no effect while editing, but saved the «alignment» param.

Header Tool



Document image

List Tool

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

Document image

Marker Tool

Document image

Warning Tool

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

Embed Tool

Tool uses Editor.js pasted patterns handling and inserts iframe with embedded content. Supporting services: youtube, 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 to include raw HTML code in your articles.

Document image



Checklist Tool for Editor.js

This Tool for the Editor.js allows you to add checklists to your texts.

Document image

Delimiter Tool for Editor.js

Adds a simple delimiter.

Document image

Table tool

Simple click on + icon to add a row or a column.

Document image



InlineCode highlight

Inline Tool for marking code-fragments

Document image

Enable Read Only? (New)

Checkbox for enable/disable read-only mode for all your Blocks

Document image

How to setup

  1. Install plugin from bubble editor plugins tab
Document image



2. Place plugin element on page to get access to plugin actions, events and plugin element proprieties

Document image



3. Set the element proprieties as needed

4. Add events or actions in workflow for your scenario. Done!

Plugin Element Proprieties

This plugin has one visual element Editorjs which should be used on page.

Document image

Element Actions

1. Save Changes

Save last changes.

2. Set Caret Position

Action provides with methods to work with Caret built-in class. You can choose one of three positions - Focus At the beginning At the end

3. Refresh

Clear Editor's content and push new content.

4. Clear

Clear Editor's content. 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. A Editorjs Error - when an editor error happens event
  2. A Editorjs Content is changed - event to handle when content is changed
  3. A Editorjs Content is ready - event to handle the content when is ready

Workflow example

As an example we will use Set carret action on button click to use this feature by focusing the editor.

  1. Place the plugin element on page and a button
Document image



2. Go to workflow tab , add an event when the button is clicked to set focus on editor

Document image



3. Done! Now when clicking on button it will focus on 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

Demo to preview the settings



Updated 19 Apr 2022
Did this page help?
Yes
No