Modern Rich Text Editor (Editor.js)

Demo to preview the plugin:

Introduction

The Modern Rich Text Editor (Editor.js) plugin brings a powerful, block-based content editor into your Bubble application. Built on the popular Editor.js framework, this plugin enables you to create structured, dynamic, and highly interactive content experiences without sacrificing performance or flexibility.
It is ideal for applications such as content management systems, SaaS dashboards, documentation tools, learning platforms, blogs, and internal admin tools where rich, modular content creation is required.
Key Features

Prerequisites

Before using the Modern Rich Text Editor (Editor.js) plugin, ensure the following:
  • Bubble Account & Editor Access
    • You must have an active Bubble account with editor access to install and configure the plugin.
  • Basic Knowledge of Bubble Data & Workflows
    • Familiarity with dynamic data binding, workflows, and database fields is recommended.
  • Database Fields Prepared (Recommended)
    • Create text fields to store editor output in JSON and/or HTML formats.
  • File Storage Enabled
    • Required for image and file uploads, including private file handling.
  • Responsive Layout Awareness
    • Place the editor inside a responsive container for optimal performance across screen sizes.

Image without caption

How to Set Up

Step 1. Install the Plugin

Step 2. Add the Editor Element to Your Page

Step 3. Core Editor Configuration

Step 4. Block-Level Configuration

Step 5. Mentions, Files & Styling

Step 6. Internationalization (i18n)

Step 7. Preview & Test

Plugin Element - Modern Rich Text Editor

Image without caption

Fields

Element Actions

Exposed states

Element Events

Image without caption

Changelogs