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

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?

Hi @treb.gatte I have read the chat with @jici too. When you upload / paste an image into the editor it will be converted to BASE64 and uploaded to your Bubble storage (the S3 URL you are seeing, I think it is http by Bubbles design). I do not know for sure how the privacy rules work with files like this. I have not find an option in the plugin editor to make files like this private, but maybe @jici knows more? If there is something I can implement let me know!

Update 1.11.0

  • Added the option to use nested lists instead of the normal lists! cc: @luke2

1 Like

Here’s the key part:

     uploadContent: function(fileName: String, contents: Base64 String, callback: function(err, url), [attachTo])
                    attachTo: optional parameter to attach the file to. It has to be a thing in Bubble

So you will need to add two fields


(maybe only one could work). And use the unique ID from the thing in the attachTo parameter

1 Like

@Jici Awesome! Thanks so much, will put this on my list to implement :slight_smile:

1 Like

@Thimo Let me know when you do. I have a real problem with this right now and need a fix asap. Have credit card in hand!

Update 1.12.0

When you check these options and create a privacy rule where the ‘View attached files’ is unchecked the file URL will not be accessible for the users that are affected by this rule:

The file URL will also look different (instead of the AWS URL), for example: https://pluginpreview.bubbleapps.io/version-test/fileupload/f1662494626624x412398049883751000/richtext_content.png

Big thanks to @Jici for the helpful tips! :slight_smile:

3 Likes

Woo hoo!!! Thank you @Thimo for making this change as now this closes a security hole for rich text entries. Signing up now…

1 Like

I don’t know if you think about that, but I think that a list of uploaded files in a state of the plugin could be usefull in some case to manage them if needed.

1 Like

And now when you click the link and you aren’t signed in, you get:

{“error_class”:“Unauthorized”,“args”:{“code”:“1662498665273x209989355952476580”},“message”:null,“translation”:“Permission denied”}

Yay!!

2 Likes

Quick question and maybe I’ve missed it. So you need to store as JSON if you plan to let the user edit the content? If I output as HTML and then set the field as the initial state with the HTML content, nothing loads and the control seems to be non-responsive.