Notion-like Rich Text Editor

Demo to preview the settings

Introduction

This plugin is a versatile editor with a Notion-like interface. It supports custom blocks including paragraphs, headings, tables, images, lists, inline code, delimiters, raw HTML, checkboxes, quotes, warnings, and iFrame embeds. Autobinding ensures real-time updates to your content. Ideal for creating rich, interactive documents effortlessly.

How to setup

Adding the element to the page

Start by adding the Notion-like Rich Text Editor element to the page from the sidebar.

Fill the Content

Fill the Initial Content you would like to have (can be a dynamic value).

Define Styling

Define styling & select the tools and blocks you want.

Plugin Element “Notion-like Rich Text Editor”

Element Fields:

Image without caption
Image without caption
Image without caption

The list with all fields:

Title
Description
Type
Initial Content
(Optional) This property defines the initial content to be displayed within the editor upon initialization. It has to be JSON-formatted in the same format that what the editor gives as output.
Text
Read Only
When set to “Yes”, this property makes the editor read-only, meaning users can't make changes to the content, but can see/read it.
Yes/No
Autofocus
Use this property to determine whether the editor should automatically focus on load or if the user needs to manually click into it to start editing. If set to “Yes”, the editor automatically gains focus when it's loaded.
Yes/No
===== Configurate all elements =====
Paragraph
Inline Toolbar
The inline toolbar provides users with quick access to formatting options while they are editing text within a Paragraph block. Enabling the inline toolbar allows users to format text without needing to select the entire block. Instead, they can simply highlight the portion of text they wish to format and use the inline toolbar options.
Yes/No
Headers
Headers
Makes the Header block available for users, empowering them to include headings in their Editor.js content to improve readability and structure. Do not let “Initial Content” have headers if this field is set to “No”
Yes/No
Header placeholder
Serves to define placeholder text for the Header block within the editor. This text appears when the Header block is empty, offering guidance or context for users regarding the content they should input into the block.
Text
Default Header
This determines the default size or importance of the header text when a new Header block is added. Header levels typically range from 1 to 6, with 1 being the largest and most important, and 6 being the smallest and least important. By specifying a default level, users can streamline their editing process by automatically applying their preferred header size whenever they add a new Header block. The weight of the default header (1 for H1, 2 for H2, 3 for H3...)
Number
Inline Toolbar
Determines whether the inline toolbar is enabled for the Header block in the editor. When set to yes, it allows users to access formatting options directly within the Header block itself, simplifying the editing process by providing quick access to styling tools. If set to no, the inline toolbar for the Header block will be disabled, and users will need to use the main toolbar at the top of the editor to apply formatting to their headers.
Yes/No
Shortcut
Refers to the keyboard shortcut assigned to quickly make from block a Header block in the editor. When configured, users can use this shortcut combination to efficiently set header sections without the need to navigate through the toolbar.
Text
===== Table =====
Tables
When set to yes, users can add tables to their content, facilitating the organization and presentation of tabular data within the editor interface. Be aware when setting this field to “no”, and your initial content should not contain it.
Yes/No
Inline Toolbar
Specifies whether the inline toolbar should be enabled for the Table block. When set to “yes”, users can access a set of formatting options directly within the Table block, making it easier to customize the appearance and structure of the table without needing to navigate to a separate toolbar.
Yes/No
Initial Rows
The number of rows initially displayed when a new table is created.
Number
Initial Columns
The number of columns initially displayed when a new table is created.
Number
===== Warning =====
Warning
When set to yes, it allows users to add Warning blocks to their content, providing a visual warning or alert message within the editor interface. This feature can be useful for highlighting important information, notifying users about potential risks, or drawing attention to specific content elements.
Yes/No
Inline Tool
Specifies whether the inline toolbar for the Warning block is enabled or disabled.
Yes/No
Title placeholder
Defines the placeholder text that appears in the input field for the title of a Warning block. This placeholder text provides guidance or a suggestion to the user regarding the type of content expected in the title field. It helps users understand the purpose of the field and prompts them to enter relevant information related to the warning message's title.
Text
Message placeholder
Specifies the placeholder text that appears in the input field for the message content of a Warning block. This placeholder text serves as a temporary hint or suggestion to users, indicating the type of information expected in the message field. By providing descriptive placeholder text, users are guided on what kind of content to input, enhancing the usability and clarity of the editor interface.
Text
Warning Icon
Refers to the icon that is displayed alongside a Warning block in the editor interface. This icon serves as a visual indicator to users, alerting them to the presence of a warning message.
Image
===== Checklist =====
Checklists
Determines whether the Checklist block is enabled or disabled in the editor. When enabled, users can create checklist items within the editor interface to organize tasks, create to-do lists, or outline steps in a process.
Yes/No
Inline Toolbar
Specifies whether the Checklist block should have an inline toolbar enabled or not. When set to yes, it allows users to access formatting options directly within the Checklist block.
Yes/No
Check Color
Defines the color of the checkbox when it is checked.
Color
Checkbox Border Color
Defines the border color of the checkbox when it is checked.
Color
===== Quote =====
Quotes
It enables users to insert and style block quotes, which are visually distinct sections of text often used to highlight important or noteworthy content.
Yes/No
Inline toolbar
If set to yes, users can insert and edit quote blocks directly within the text flow, allowing for seamless integration of quoted text within paragraphs or other content.
Yes/No
Quote placeholder
Defines the placeholder text displayed within the quote block for the quote itself, guiding users on where to input their quoted text.
Text
Author placeholder
Sets the placeholder text within the quote block for the author attribution, indicating where users should provide the name or source of the quote.
Text
Border Color
This property allows you to specify the color of the border surrounding the quote block.
Color
Border Width (px)
This property determines the thickness in px of the border surrounding the quote block.
Number
Border Radius
With this property, you can define the curvature of the corners of the quote block's border. A higher value will result in rounder corners, while a lower value will make them sharper.
Number
===== Image =====
Images
This property enables the functionality to add images to your text editor. When set to yes, users can insert images into their content.
Yes/No
Button Content
This property defines the content or text displayed on the button used to insert images. It allows you to customize the label or wording on the button, making it more intuitive for users to add images to their content.
Text
===== Inline Code Tool =====
Inline Code
When this property is set to yes, it enables the ability to insert inline code blocks into the text editor. These inline code blocks are used to display code snippets within the text seamlessly.
Yes/No
Background Color
This property determines the background color of the inline code blocks.
Color
Font Color
With this property, users can specify the color of the text within the inline code blocks.
Color
===== Delimiter =====
Delimiters
When set to yes, this property enables the option to insert delimiter blocks into the text editor. Delimiter blocks visually separate sections of text, aiding in organizing and structuring content.
Yes/No
Content
This property defines the content or symbol used as the delimiter within the delimiter blocks.
Text
Color
With this property, users can specify the color of the delimiter within the delimiter blocks.
Color
Font Size
This property determines the size of the font used for the delimiter content within the delimiter blocks.
Number
===== Raw HTML =====
Raw HTML
When set to yes, this property allows users to insert raw HTML code blocks into the text editor. Raw HTML blocks enable users to directly input and customize HTML code within the editor.
Yes/No
Font Color
This property defines the color of the text displayed within the raw HTML code blocks.
Color
Background Color
The background color of the raw HTML code blocks.
Color
===== Lists =====
Lists
When set to yes, this property enables the option to create lists and nested lists within the text editor. Use Tab and Shift+Tab keys to create or remove nested list.
Yes/No
Inline toolbar
The inline toolbar provides users with quick access to formatting options while they are editing text within a Lists block.
Yes/No
===== Embed (iFrame) =====
Embeds (iFrames)
When set to yes, this property enables users to insert embedded content blocks into the text editor. Embedded content can include items like videos, social media posts, or interactive elements. Just paste the link to the resource as a simple text, if it is accessible it will be shown on the page.
Yes/No
===== Code =====
Code Blocks
When set to yes, this property enables users to insert code blocks into the text editor. Code blocks are used for displaying and formatting code snippets within the text.
Yes/No
===== Marker =====
Markers Tool
If set to yes, this property enables the marker tool within the text editor. The marker tool allows users to highlight or mark specific portions of text for emphasis.
Yes/No
Marker Color
The color of the Marker.
Color
===== Alerts =====
Alerts
When set to yes, this property enables the functionality to add alert blocks to the text editor. Alert blocks are used to display important messages or notifications within the content.
Yes/No
Inline Toolbar
Enables the inline-toolbar for Alerts blocks.
Yes/No
Default
This property specifies the default type of alert block to be used. Type can be set in the editor, but this sets the default type when adding alert.
Dropdown ( primary,secondary,info,success,warning,danger,light,dark )
Placeholder
This property defines the placeholder text displayed within the alert block for users to input their message or notification content. It provides guidance to users on what type of information to enter into the alert block.
Text
===== Text Variant =====
Text Variant Tool
This option decides whether users can use different styles (like callouts, citations, or details) to make text stand out.
Yes/No
Callout Border Color
The border color of the callout block.
Color
Callout Shadow Color
The shadow color of the callout block.
Color
For Paragraphs
Allow users to apply special styles (like callouts or citations) to paragraphs of text.
Yes/No
For Headers
Enable users to use special styles (like callouts or citations) for headers.
Yes/No
For Lists
Provide the option to apply unique styles (like callouts or citations) to items in a list.
Yes/No
For Checklists
Allow users to use special styles (like callouts or citations) for items in a checklist.
Yes/No
===== Button =====
Buttons
Indicates whether the button block is enabled or not.
Yes/No
Buttons Type
Define the type of the buttons. If set to 'Open Tab', it will open a new tab with destination the link you provided. If you select 'Trigger Custom Workflow', it will trigger the event "Custom Button is Clicked".
Dropdown (Open Tab,Trigger Custom Workflow)
Background color
The background color of the button.
Color
Text Color
The color of the text inside the button.
Color
Border Color
The color of the border of the button.
Color
==== Text Alignment =====
Text Alignment
This property likely controls whether a text alignment tuning tool is available within the editor.
Yes/No
For Paragraphs
Allow text-alignment for paragraphs.
Yes/No
For Headers
Allow text-alignment for headers.
Yes/No
For Quotes
Allow text-alignment for quotes.
Yes/No
For Images
Allow text-alignment for images caption.
Yes/No
For Warnings
Allow text-alignment for warnings.
Yes/No
===== Drag & Drop =====
Enable Drag & Drop
Determines whether the drag and drop functionality for blocks is enabled.
Yes/No
===== Font Tools =====
Enable Font-size Tool
Determines whether the font size customization tool is enabled.
Yes/No
Enable Font-family Tool
Enable or disable font-family tool. It allows your users to dynamically change the font of a paragraph.
Yes/No
Enable Font-color Tool
Determines whether the font color customization tool is enabled.
Yes/No
Enable Underline tool
Determines whether the underline formatting tool is enabled.
Yes/No
Enable Strikethrough tool
Determines whether the strikethrough formatting tool is enabled.
Yes/No
===== Attachment =====
Enable Attachment tool
Determines whether the attachment tool for adding files to the editor is enabled.
Yes/No
Attachment button content
Text for the Attachment Button
Text
Upload failed text
Text when the upload attachment content fails.
Text
===== Translation =====
Enable Translation
Determines whether internationalization (translation) support is enabled. Changes in the editor the exiting text with the one written to the corresponding field.
Yes/No
Convert to
Translation for the text in the inline toolbar for converting block types.
Text
Click to tune
Translation for the tooltip message when clicking to open block settings.
Text
Add
Translation for the 'Add' button text in the toolbar.
Text
Paragraph
Translation for the 'Paragraph' block type.
Text
Heading
Translation for the 'Heading' block type.
Text
List
Translation for the 'List' block type.
Text
Warning
Translation for the 'Warning' block type.
Text
Quote
Translation for the 'Quote' block type.
Text
Checklist
Translation for the 'Checklist' block type.
Text
Code
Translation for the 'Code' block type.
Text
Delimiter
Translation for the 'Delimiter' block type.
Text
Raw HTML
Translation for the 'Raw HTML' block type.
Text
Table
Translation for the 'Table' block type.
Text
Marker
Translation for the 'Marker' tool.
Text
Bold
Translation for the 'Bold' text formatting.
Text
Inline Code
Translation for the 'Inline Code' text formatting.
Text
Italic
Translation for the 'Italic' text formatting.
Text
Image
Translation for the 'Image' block type.
Text
Alert
Translation for the 'Alert' block type.
Text
Link
Translation for the 'Link' tool.
Text
Underline
Translation for the 'Underline' text formatting.
Text
Font Family
Translation for the 'Font Family' tool.
Text
Font Size
Translation for the 'Font Size' tool.
Text
Text Color
Translation for the 'Text Color' tool.
Text
Strikethrough
Translation for the 'Strikethrough' text formatting.
Text
Move up
Translation for the 'Move Up' action (for blocks).
Text
Move down
Translation for the 'Move Down' action (for blocks).
Text
Delete
Translation for a 'Delete' block action.
Text
Unordered
Translation for the 'Unordered List' block type.
Text
Ordered
Translation for the 'Ordered List' block type.
Text
Unavailable block
Translation for an indication that a block type is unavailable or not supported.
Text
Details
Translation for the 'Details' block type.
Text
Call-out
Translation for the 'Callout' block type.
Text
Citation
Translation for the 'Citation' block type.
Text
Attachment
Translation for the 'Attachment' block type.
Text
Select file to upload
Translation for the text displayed on the attachment tool's select file button.
Text
File upload failed
Translation for a message indicating that attachment upload has failed.
Text
With border
Translation for option indicating an image can have a border.
Text
Stretch image
Translation for an option indicating an image can be stretched.
Text
With background
This property defines the translation for indicating whether an image can have a background.
Text
Button
This property defines the translation for the block "Button". It specifies how the term "Button" should be translated in the user interface.
Text
Set (for Buttons)
This property expects a translation for the action of setting a button.
Text
Button Text
This property expects a translation for the placeholder text used for entering button text.
Text
Link Url
This property expects a translation for the placeholder text used for entering button URLs.
Text
With Headings
This property expects a translation for indicating the option to include headings in tables.
Text
Without Headings
This property expects a translation for indicating the option to exclude headings in tables.
Text
Add row above
This property expects a translation for the action of adding a row above in a table.
Text
Add row below
This property expects a translation for the action of adding a row below in a table.
Text
Delete row
This property expects a translation for the action of deleting a row in a table.
Text
Add column left
This property expects a translation for the action of adding a column to left in a table.
Text
Add column right
This property expects a translation for the action of adding a column to right in a table.
Text
Delete column
This property expects a translation for the action of deleting a column in a table.
Text

Element States

Title
Description
Content (JSON as Text)
Represents the structured data that represents the content within the Editor.js instance. This data typically includes information about the blocks of text, images, tables, and other elements present in the editor. It's serialized into a JSON format to be stored, manipulated, and transferred more easily within the application.
Last Event Triggered
The ID you specified in the Button Field that has just been clicked. Use this state to get the id of the clicked button. Important to know the state works only with the Button Type set to “Trigger Custom Workflow”. Ex: www.google.com/id123 ⇒ id = id123
Last Action Type
The last action done. Can be one of those : "block-added", "block-changed", "block-removed”
Last Action Block Type
The block type on which the last action was done. Can be "paragraph", "header", "checklist"... depending on what you've enabled.
Is Read-Only
Returns "yes" if the Editor is currently in read-only mode.

Element Events

Title
Description
Caret Position has been changed
Is fired when the caret position has been modified by action "Set Caret Position". The caret position is typically represented as a vertical line or blinking cursor on the screen, indicating the exact position within the text where the user's input will take effect.
Custom Button is Clicked
Is fired when a Editor Button is Clicked. Important to know the event works only with the Button Type set to “Trigger Custom Workflow”.
New Block is added
Is fired when a new block is added inside an Editor.
Block is removed
Is fired when a block is being removed from an Editor.
Block is changed
Is fired when a block is being changed inside an Editor.
Block is moved
Is fired when a block is being moved inside an Editor.

Element Actions

Display Data

Action to display data inside an Editor
Image without caption
Title
Description
Type
Data
Data to display in the editor, if the data is empty and action called, the editor is cleared. It has to be JSON-formatted in the same format that what the editor gives as output.
Text

Open toolbar

Action to open the toolbar.
Image without caption

Close toolbar

Action to close the toolbar if it is opened.
Image without caption

Set Caret Position

Action to define the caret's position and trigger the caret event. A caret position is the location where the text cursor (the blinking vertical line) is currently placed within a text editor or input field. It indicates where new text will be inserted when you start typing.
Image without caption
Image without caption
Title
Description
Type
Position
Define the new position of the caret from the given dropdown: Start, End, Focus. If the value of is 'Start', it sets the caret position to the start of the first block in the editor. If the value is 'End', it sets the caret position to the end of the first block in the editor. If the value is 'Focus', it focuses on the editor, presumably bringing it into view or activating it.
Dropdown (Start, End, Focus )

Reset Data

Reset data of an Editor, clears all the content.
Image without caption

Set Read-only

Sets value of read-only mode.
Image without caption
Title
Description
Type
Enable
Enable or disable read-only mode
Yes/No

Add a Paragraph

Adds a paragraph with dynamic text at the end of the Editor.
Image without caption
Image without caption
Title
Description
Type
Text
Paragraph content
Text

Changelogs

Update: 08.12.23 - Version 1.50.1

  • Increased reorder speed loading

Update: 21.09.23 - Version 1.50.0

  • Transfer to Flusk

Update: 17.08.23 - Version 1.49.5

  • Working version

Update: 10.08.23 - Version 1.49.4

  • Small update

Update: 09.03.23 - Version 1.49.3

  • Small fix

Update: 08.03.23 - Version 1.49.2

  • Transfer to Flusk

Update: 11.09.22 - Version 1.49.1

  • Fixed a bug about "Display Data" action

Update: 18.08.22 - Version 1.49.0

  • Added translation for "Image" block

Update: 18.08.22 - Version 1.48.0

  • Added action "Set Read-only" and custom state "Is Read-Only"

Update: 16.08.22 - Version 1.47.0

  • Added full translation for Table Tool

Update: 13.08.22 - Version 1.46.0

  • Added translation for "Filter" and "Nothing found"

Update: 11.08.22 - Version 1.45.0

  • Added full translation for Image Block

Update: 10.08.22 - Version 1.44.0

  • Added full translation for Attaches Tool

Update: 09.08.22 - Version 1.43.0

  • Added full translation for buttons

Update: 08.08.22 - Version 1.42.5

  • Fix

Update: 08.08.22 - Version 1.42.4

  • Bug fix

Update: 08.08.22 - Version 1.42.3

  • Small fix

Update: 08.08.22 - Version 1.42.2

  • Updated description

Update: 08.08.22 - Version 1.42.1

  • Updated description

Update: 26.07.22 - Version 1.42.0

  • Re-added attaches tool & deleted auto-update because not stable.

Update: 26.07.22 - Version 1.41.1

  • Fix

Update: 26.07.22 - Version 1.41.0

  • Added auto-update & removed attachment tool

Update: 24.07.22 - Version 1.40.1

  • Fix

Update: 24.07.22 - Version 1.40.0

  • Enable or disable autofocus

Update: 24.07.22 - Version 1.39.1

  • Updated description

Update: 20.07.22 - Version 1.39.0

  • Added attachment tool

Update: 18.07.22 - Version 1.38.0

  • Added new custom state "Last Action Block Type"

Update: 18.07.22 - Version 1.37.1

  • Fixed bug where Inspect button was invisible

Update: 18.07.22 - Version 1.37.0

  • Hide toggle switch of buttons in read-only mode

Update: 17.07.22 - Version 1.36.0

  • Added 4 new events : "block_changed", "block_added" "block_modified", "block_deleted". Also added state "last_action"

Update: 16.07.22 - Version 1.35.0

  • Added "Clear" action

Update: 15.07.22- Version 1.34.1

  • Fixed empty state

Update: 10.07.22 - Version 1.34.0

  • Added Warning Icon customization

Update: 09.07.22 - Version 1.33.0

  • Translation : first commit

Update: 08.07.22 - Version 1.32.0

  • Added possibility to handle multiple custom workflows

Update: 08.07.22 - Version 1.31.0

  • Added Beta version for Custom Workflow

Update: 07.07.22 - Version 1.30.0

  • Added Quote customization

Update: 06.07.22 - Version 1.29.0

  • Added font-size customization for Delimiter block.

Update: 06.07.22 - Version 1.28.0

  • Added delimiter customization

Update: 06.07.22 - Version 1.27.0

  • Added color customization for Raw HTML Block

Update: 05.07.22 - Version 1.26.0

  • Added checkbox customization

Update: 05.07.22 - Version 1.25.0

  • Added color customization for Inline Code Tool.

Update: 04.07.22 - Version 1.24.1

  • Stable

Update: 03.07.22 - Version 1.24.0

  • Added Strikethrough tool

Update: 03.07.22 - Version 1.23.0

  • Added Font-Color Tool

Update: 02.07.22 - Version 1.22.0

  • Added Font-size & Font-family Tools.

Update: 02.07.22 - Version 1.21.2

  • Fixed some bugs

Update: 02.07.22 - Version 1.21.1

  • Stable

Update: 02.07.22 - Version 1.21.0

  • Added Tooltips & its configuration

Update: 02.07.22 - Version 1.20.2

  • Stable again

Update: 02.07.22 - Version 1.20.1

  • Unstable

Update: 02.07.22 - Version 1.20.0

  • Added Image Gallery Block

Update: 01.07.22 - Version 1.19.0

  • Added Drag & Drop support for all blocks.

Update: 01.07.22 - Version 1.18.0

  • Added Undo / Redo feature

Update: 01.07.22 - Version 1.17.0

  • Ability to text-align most of the blocks (Left, Center, Right)

Update: 30.06.22 - Version 1.16.0

  • Added color customization for the Marker tool.

Update: 30.06.22 - Version 1.15.0

  • Added Paragraph alignement (left, center, right, justify)

Update: 30.06.22 - Version 1.14.1

  • Fix

Update: 30.06.22 - Version 1.14.0

  • Possibility to dynamically edit the border & shadow colors of the "Callout" block.

Update: 30.06.22 - Version 1.13.0

  • Added Toggle Blocks support

Update: 30.06.22 - Version 1.12.1

  • Added inline-toolbar toggle for Alerts

Update: 30.06.22 - Version 1.12.0

  • Added Alert Block

Update: 29.06.22 - Version 1.11.0

  • Added Callouts, Details and Citation tool

Update: 29.06.22 - Version 1.10.1

  • Fix

Update: 29.06.22 - Version 1.10.0

  • Added comments feature

Update: 28.06.22 - Version 1.9.0

  • Added new actions to close and open the Toolbar manually

Update: 27.06.22 - Version 1.8.1

  • Fix

Update: 27.06.22 - Version 1.8.0

  • Possibility to enable/disable all the blocks and tools

Update: 27.06.22 - Version 1.7.0

  • Added Text Underline

Update: 26.06.22 - Version 1.6.0

  • Added Marker tool

Update: 25.06.22 - Version 1.5.0

  • Added Nested Bullet Lists

Update: 24.06.22 - Version 1.4.0

  • Added Warning block

Update: 23.06.22 - Version 1.3.1

  • Updated Description

Update: 23.06.22 - Version 1.3.0

  • Added Quote Tool

Update: 22.06.22 - Version 1.2.0

  • Added Checklist Tool

Update: 20.06.22 - Version 1.1.4

  • Bug fixing

Update: 20.06.22 - Version 1.1.3

  • Small bug fix when Editor was in a Repeating Group

Update: 20.06.22 - Version 1.1.2

  • Bug fix : min height was statically fixed to 200px, it is now taking Bubble's value

Update: 20.06.22 - Version 1.1.1

  • Added possibility to use the Editor inside cells of a repeating group

Update: 20.06.22 - Version 1.1.0

  • Added a new action : Display Value. Also allowed the editor to take the full width of it's parent container

Update: 15.06.22 - Version 1.0.0

  • First Commit
Share
Content