[New plugin] Modern Rich Text Editor (Editor.js)

Showcase Plugins
1

Hi everyone!

I was in need of a Rich Text Editor so I decided to finish the plugin I started building in 2020 to make it fast, stable, responsive and fully compatible with the new responsive engine. This is a block based Rich Text Editor and you can see a selection of supported features below.

:arrow_right: Demo page (editor is public): Modern Rich Text Editor (Editor.js)
:arrow_right: Plugin page: Modern Rich Text Editor (Editor.js) Plugin | Bubble

Highlighted blocks/features:

  • Fully compatible with the new responsive engine
  • Auto-binding
  • Paragraphs
  • Headings (H1, H2, H3, H4, H5, H6)
  • Inline toolbar with ‘bold’, ‘italics’, ‘underline’, ‘code’, ‘marker’, ‘link’ options and ability to change the block type
  • Uploading / dragging and dropping of images
  • Workflow action to clear the editor
  • Workflow action to display data in the editor
  • Workflow trigger when the content is changed.
  • Ability to add lists
  • Ability to add tables
  • Ability to add checklists
  • Ability to add quotes
  • Ability to add delimiters
  • Ability to add warnings
  • Ability to add code fields
  • Default shortcuts for blazing fast navigation
    and more…

If you need more features you can reach out to me using the Bubble forum (@thimo) or you can find my email on my contributor page!

Updates
1.2.0
1.3.0
1.4.0
1.4.1
1.5.0
1.6.0
1.6.1
1.7.0
1.8.0
1.9.0
1.9.1
1.9.2
1.10.0
1.12.0
1.15.0
1.27.0
1.28.0
1.32.0
.
.
1.65.0
.
1.84.2

27 Likes
2

Damn, that’s some heavy lifting! Big props to you.

Any chance it does text outline?

3

Very nice. Would also be awesome if there was the ability to tag users using @ and then run a WF when someone clicks on these user’s name after the text was saved (like Facebook’s tagging functionality). And even cooler if you could also tag other database things like products, events etc. using other symbols (#, / etc.) and then again on click run a WF that contains that thing.

5 Likes
4

Hi Thimo, This is looking very promising.

Do you have any plans to enable the option to export the content as HTML?

3 Likes
5

@zach8 Thanks! Outline is not yet supported unfortuantly

@maze There is not yet a tag feature like that, but it does sound like a useful feature! I will keep an eye on the library if they add it at some point!

@mike_verbruggen Just pushed an update so it exposes HTML as well (see demo)! (the ‘table’, ‘warning’ & ‘checkbox’ blocks are not supported yet (they get ignored in the HTML), but if necessary I could create something custom for these block in the future) :slight_smile:

6 Likes
6

Really impressive, nice work.

Is it possible to expose a few formatting options on ‘Headings’ and also possible in the future to have say nested checkboxes or bullet points?

Top notch stuff

7

Thanks Luke! Yes thats definitely possible for the Headings! I will put that on my list.

Nested bullet points are supported by the library (community block), but it misses the feature to specify if you want the initial block to be a bullet list or a numbered list (it defaults to a numbered list). So I really want to wait till that feature gets supported before I implement it (I think it is coming soon, so I will keep an eye on it!) :slight_smile:

1 Like
8

@luke2 Update 1.3.0 adds the ability to control the font size and font weight for the different heading types:

2022-08-17 om 19.29.00
2022-08-17 om 19.29.00866×1290 88.7 KB

2 Likes
9

Awesome - thanks for the heads-up about the nested bullet points/numbering. Headings look good, seriously cool plugin this.

10

Just had a play with this and it looks great - you do create beautiful and functional plugins!

There are a couple of things that would be super powerful, I’m wondering if any will be possible:

  1. The ability paste snippets would be great. I would use this for {{merge_tags}} so the output HTML could be used for personalisation. After having a play I could essentially create a dropdown that adds the snippets to the users clipboard for them to paste but the UX would be much better if this could just be placed right where the curser currently is.

Building on this.

  1. I would be great to have the ability to save blocks, so as somebody is typing down the page they could hit a button that would inject a saved template. I have tried to copy and paste sections and it works but strangely doing so breaks the undo feature - I have no idea why.

I look forward to your reply and congratulations on launching another Really great plugin!

11

Hi @shaun I have tried to implement something like this, but it appears to be difficult as when the user clicks outside the input, the input will not be focused anymore so there is no way for me to know where to place these tags.

I did push an update (1.4.0 & 1.4.1) that allows you to add blocks using workflow actions, but I am afraid this is not something you are looking for.

Yes this is the right way to do it. Not sure why it breaks the undo feature. I did see an open ticket for a bug like this for the library, so it could be a library bug that needs fixing.

1 Like
12

Update 1.5.0

  • Added a workflow action to display text (instead of JSON) in the editor that automatically converts to paragraph blocks
13

Hey thx for this !

Great work but we need to add word-break: break-all property ! :smiley:
![

Capture d’écran 2022-08-23 à 20.42.40|690x393](upload://gOFyMLD9wTVSFG2iOOBNPntCjAK.jpeg)

Pending release you can add this :sweat_smile:

<style>
       
    .ce-paragraph  
                        {
        word-break: break-all;
            }
    </style>

:fire::fire::fire::fire:

14

@loic.melane Instead of the break-all property I have now implemented the break-word property as this works like the break-all property but also respects smaller words. You can update the plugin to version 1.6.1 to see it in action (or see the demo page)! :slight_smile:

1 Like
15

wow thx :smiley:

16

Hey, @Thimo,

Awesome plugin, love it.

I have a couple of questions.

  1. My app is currently using the Bubble’s RTE (Rich Text Editor), which you can tell that is sucks. If I start using this plugin, what happens to all the texts format, are this two compatible, or is there a way to convert the text format?

  2. Is there a way to align texts center or right, and change text’s color?

  3. Is there a way to change the tooltip’s text?
    1

  4. Is there a way to change the menu’s text?

    2
    2438×654 21.3 KB

Thanks in advance :slight_smile: :computer:

17

Possible to allow vertical scrolling ? :frowning:

18

There is not yet a way to convert BB code to JSON to use in the editor field. This will be a nice feature to have so I will keep my eye on it! You can display plain text using workflow actions though :slight_smile:

I just pushed update 1.7.0 that adds the text alignment feature (you can also turn it off):

2022-08-23 om 23.43.01

It is on my list to add multiple language options (aka the ability to replace all the text in the editor with your own). So hopefully I can include that soon! :slight_smile:

1 Like
19

Using the new responsive engine, you can group the editor in a group and give that group a max height and click the ‘Allow vertical scrolling when content overflows’ checkbox to make it scrollable if it passes the max height:

ezgif-1-503591ca2f

2022-08-23 om 23.51.38
2022-08-23 om 23.51.38772×408 34.2 KB

1 Like
20

Great

Awesome

Perfect

Thanks, @Thimo, when I am ready to replace Bubble’s RTE, this plugin will definitely be on the list (at 1st place :1st_place_medal:)

1 Like