Link to plugin page: https://zeroqode.com/plugin/block-styled-editor-like-gitbook-1562331754478x527197255864731970β
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:
Allows to add link previews to your articles.
Works only with pasted image URLs.
You can add a border, stretch to full width and add a title to it.
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.
ο»Ώ
You can choose alignment for the quote. It takes no effect while editing, but saved the Β«alignmentΒ» param.
ο»Ώ
This Tool for the Editor.js allows you to add ordered or unordered (bulleted) lists to your article.
Provides Warning Block. Block has title and message with a warning icon.It can be used, for example, for editorials notifications or appeals.
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 Tool for the Editor.js allows to include raw HTML code in your articles.
ο»Ώ
This Tool for the Editor.js allows you to add checklists to your texts.
Adds a simple delimiter.
Simple click on + icon to add a row or a column.
ο»Ώ
Inline Tool for marking code-fragments
Checkbox for enable/disable read-only mode for all your Blocks
ο»Ώ
2. Place plugin element on page to get access to plugin actions, events and plugin element proprieties
ο»Ώ
3. Set the element proprieties as needed
4. Add events or actions in workflow for your scenario. Done!
This plugin has one visual element Editorjs which should be used on page.
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.
As an example we will use Set carret action on button click to use this feature by focusing the editor.
ο»Ώ
2. Go to workflow tab , add an event when the button is clicked to set focus on editor
ο»Ώ
3. Done! Now when clicking on button it will focus on editor
Update: 05/11/2020 β
Update: 28/01/2022 - Version 1.9.0
Update: 10/03/2022 - Version 1.10.0
Live Demo: https://zeroqode-demo-17.bubbleapps.io/editor_jsβο»Ώο»Ώ
ο»Ώ