> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/medium-rich-text-editor.md).

# Rich Text Editor like Medium 📝

The dead simple inline editor toolbar

## 🔗 Links

> [Demo](https://de-demo2.bubbleapps.io/version-test/medium) | [Editor](https://de-demo2.bubbleapps.io/version-test/medium)

> [Plugin page](https://bubble.io/plugin/rich-text-editor--medium-1621422273210x663707797524316200)

> [Forum](https://forum.bubble.io/t/plugin-rich-text-editor-like-medium/152496)

## ℹ️ Introduction

This is a clone of [medium.com](https://medium.com) inline editor toolbar.

## 🔥 Features

* 7 different themes
* 25+ toolbar buttons
* Extremely simple setup

## 📚 Documentation

### ➡️ Quick Start

1. Add the **Medium Text Editor** on the page:

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEfzZVdSsBY8F2toLA%2F-MaEiJTRjmessnRdT8_Y%2FMedium.jpg?alt=media\&token=e78b654e-fba6-4f30-b6aa-08159941bc63)

2\. Set the **Content** field (can be static or dynamic value) and the **Buttons** list (comma-separated values). See below for the available buttons.

### ➡️ Available Toolbar Buttons

* bold
* italic
* underline
* anchor
* quote
* strikethrough
* h1, h2, h3, h4, h5, h6
* justifyLeft, justifyCenter, justifyRight, justifyFull
* orderedlist, unorderedlist
* indent, outdent
* image
* pre
* removeFormat
* html
* subscript
* superscript

### ➡️ Change the Toolbar Theme

To change the toolbar theme, simply call the **Set Theme** action and choose one of the available themes.

You can also create your own theme by writing custom CSS.

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEk4lNLgEIkYa3ptd6%2F_.jpg?alt=media\&token=6e2df06f-131f-48b8-9bbd-01550ad71add)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEkB1jVIQbto8fRCne%2FMedium_Editor.jpg?alt=media\&token=1b96da1a-9912-416f-8018-88d5c605c1f0)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEkHf5FmcmC4nvkuhr%2FCursor_et_Medium_Editor.jpg?alt=media\&token=aba0ab40-8a04-4fca-a400-c46a060ca461)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEkLbcp2bs7cA3cBHL%2FMedium_Editor.jpg?alt=media\&token=66da9048-db47-4db8-b0b8-63c2420f5ee0)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEkQDOy6pbmXyXddZq%2FCursor_et_Medium_Editor.jpg?alt=media\&token=67880943-c5cf-4f78-8632-23e275239075)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEkUgb1By5VqX7a3mH%2FCursor_et_Medium_Editor.jpg?alt=media\&token=f5191b2b-8084-4839-b45e-39e2f3dc857b)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MaEjIp9nywDpTqj2HQX%2F-MaEk_8i_FUSnAn0nmBx%2FMedium_Editor.jpg?alt=media\&token=7723cbd3-bf77-4628-a7d9-5968a72d3714)

### ➡️ States and Events

You can always access the **Content** state with current editor content.

Every time the content changes, a **Content changed** event is triggered. You can use it in your Workflow