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

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

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!

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.

Update 1.5.0

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

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:

@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

wow thx :smiley:

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?

Thanks in advance :slight_smile: :computer:

Possible to allow vertical scrolling ? :frowning:

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

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

1 Like

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

@Thimo this looks amazing! Really well done.

I’m currently using the Zeroqode RTE and all of my app’s text content is stored as HTML. Can your plugin handle HTML as a starting text and then save out whatever format it needs in addition to html?

@Thimo Any chance of adding support for dark mode in a future version?

Thx ! But “.codex-editor__redactor” have automatically a padding-bottom at 300px why ? :face_with_monocle:

This is the library default as there should be room for the toolbox to expand:

Right now you can only use plain text or the JSON output of the editor as initial data. Not sure if I can make HTML work, but I will look into it!

I will put this on my list! Will be quite some work though, so I can’t give you a timeline for this right now.

2 Likes

It’s possible to just put the library default outside the codex editor (e.g in a focus group) ?

@loic.melane

I have pushed the update (1.8.0) to overwrite this value. Keep in mind that, in special cases, you might need to add some CSS to your page to set the overflow to ‘visible’ for a specific Bubble element, otherwise the toolbox might get cut off (but I have not noticed this while testing, so I think in 90% of the cases you should be fine).

Hi @Thimo !
This looks promising (I just bought it).
I was hoping to use it to replace the standard text data fields I had (multiline input).
But obviously, the existing content (vanilla text data field) isn’t recognized as a JSON. And also, I don’t really understand the instructions on your plugin page…
How would you go about it, to do a smooth transition for my users (ie. not a new data field :pray:) ?
Thank you,
Arthur

Hi @tart2000design !

If I understand correctly, you want to display plain text data in the editor. For these cases I have created a special workflow action that converts plain text data into paragraph blocks to show in the editor. I have included a demo for you below (click on the ‘display text’ button):

Hopefully this helps! :slight_smile:

1 Like