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

@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

Hi @Thimo
Thanks for the quick reply.
I’m trying to go from simple text to rich text with as little disruption as possible for my users…
What you’re doing in the demo is loading normal text, but then saving it as a json right ? So it means I need to add a new data field and add the same workflow you did, only when my new ‘data’ data field is empty for example…

I have tried adding it and am testing it a the moment. The weird thing I see is that I can’t seem to have it small. It’s supposed to be 30px high and yet, it seems to have some giant padding below…

Anyways, at the moment, it looks like it’s nearly what I’ve been looking for but not quite…
(mostly, I just want some clean way of doing very basic inline editing).

I pushed an update for this, see this post → [New plugin] Modern Rich Text Editor (Editor.js) - #26 by Thimo

Yes the Editor will output JSON or HTML. The editor does have a read only mode to make it easy to display the data! So you can

1 - Show the plain text data in the editor
2 - When the user presses ‘save’ you overwrite the field in de DB with the Editor JSON
3 - After that you can load the JSON data like you normally would in the Editor

Let me know if this is helpful!

Thanks @Thimo
I’m using the latest version but I still have some weird (very large) padding below.
This is absolutely crazy that Bubble doesn’t offer an easy way for simple in-line editing.
I’ve been fiddling with this for months and I still haven’t found an elegant solution…
Anyways, thanks for the effort. I don’t think this is the one for me :slightly_frowning_face: .

@tart2000design

The editor should not be large when you set the bottom padding to 0 (instead of the default 300) for example. I have a demo for you below. Just to confirm, I am using the new responsive engine (and this plugin is optimized for it), are you as well?

Modern Rich Text Editor (Editor.js)

1 Like

@Thimo +1 for dark mode (even better if we can select the font-color and background color)

1 Like

Looks awesome! It would be perfect if you could tag users with the @ symbol, any plans to introduce that?

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

Update 1.9.2

  • Added the Button Block
  • Created a custom parser to include the Table Block & Button Block in the HTML output
  • @csakon (cc: @chaostorm) Added more styling options so Darkmode is now supported! See the demo page for a showcase:

ezgif-5-ee711de7e1

5 Likes

Update 1.10.0

  • Added the ability to insert a paragraph block with data! I updated the demo page so you can see the ‘insert text’ feature in action.
1 Like

Hi Thimo,

Awesome plugin!

I’m looking for a solution for my SaaS, where my users should be able to create a text (in this case a contract) template, where they can insert dynamic data tags. I’ll give you a contract example where the brackets should be the dynamic data the user should be able to insert in the text editor:


[Company name] at [Company adress] , hereinafter referred to as: ‘the lessor’,

and

[First name] [Last name] born on [Date of birth], hereinafter referred to as: ‘tenant’,

Have agreed:

Article 1. The rented,

The landlord rents out to the tenant the non-independent living space, hereinafter referred to as ‘the rented property’: [Street name] [House number] [Location of object], [Name of space].


Would your plugin be able to do something like this?

Hope to hear from you! :slight_smile:

1 Like

Hi Bart! You can insert Paragraph blocks with data. Maybe this is the feature you can use for this. I have an example for you below:

Modern Rich Text Editor (Editor.js)

1 Like

Anything made by Thimo is instantly elegant :heart_eyes:

1 Like

Hi @Thimo,

Beautiful plugin! Ok, this is a security question as I am running into an issue with other RTE plugins regarding images that have been copy/pasted into the RT canvas.

In your example page, I see the following code generated where the image src is pointed to a file in the S3 bucket.
:arrow_right: Image Image

If I store this note in a column in a table and apply a privacy rule to the table that also includes attached files, can you confirm that the inserted image is also covered by the privacy rule? I’m discovering it is not in some plugins.

Also, there’s no https:// at the beginning of the S3 url so when you attempt to access it, it defaults to http. Is this by design?