Forum Academy Marketplace Showcase Pricing Features

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

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.

Yes, the table only accepts JSON data as initial content! HTML as initial content is not yet supported by the library :slight_smile:

1 Like

This is awesome. Is multi language supported yet?

@alejandrowunderlich not yet, it is on my list though! I will try to prioritize it :slight_smile:

2 Likes

@Thimo Any luck looking into the possibility of passing in html initial content? I currently use a different rich text editor and all my data is stored in html. I would love to switch, but need a way to convert everything

@avern87 Unfortunately, not yet. This seems to be really difficult so I am not sure if I can implement this in a timely manner :slightly_frowning_face:

Any chance you can make it support subscript and superscript in text?

Awesome plugin! Running into a couple of issues:

  • Drag and drop of images doesn’t seem to work for me - I’m putting this element into a repeating group - could that be why? (I see that it works on your demo page)
  • If a user deletes an image, the upload image still hangs around in the storage - is there a way to delete from storage as well?
  • Is there a way to limit the size of images that can be added?
  • Is there a way to change the color of the marker?
    Thanks and definitely enjoying using the plugin!

Hi @chalam I have answered your questions below!

The text editor should just work like expected even in a repeating group. For me, dragging and dropping of image sin a repeating group does seem to work for me. I have made a quick demo: Texteditordemo | Bubble Editor

I don’t think there is a way to programmatically delete files from your Bubble storage. This also happens when users upload an image using the image uploader element and swap it out for a different one for example.

Right now this is not possible, but I will put it on my list to see if I can implement this!

Not yet! But I have put this on my list as well! :slight_smile:

Very helpful! Thanks, Thimo!

LOVING THIS PLUGIN!!! We’ve tried a couple different versions of this type of plugin and this one is hands down the best.

One request I’d like to make is an easy way to embed a Youtube, Vimeo, Loom video.