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

haha yeah, it’s currently me on that page.

So I think I figured out the problem - auto-binding doesn’t work if there is NO TEXT to begin with. Eg. on a blank document, it won’t auto-bind any new text.

@wesfrank I see, good catch! I just pushed an update (1.27.0) that should fix this :slight_smile:

1 Like

Wonderful! Works great now :pray:

One more thing @Thimo

Is there any way you can expose the state of the previous block? (when you enter a new block)

For example:

  • BLOCK #1
  • BLOCK #2
  • BLOCK #3

If my cursor is at the end of BLOCK #1 and I run the workflow to “insert a new paragraph (text) block,” it inserts it in between BLOCK #1 and BLOCK #2. Perfect.

But I need to grab what text (JSON & HTML) was in the previous block (BLOCK #1)

Right now, I can only grab the entire document’s data so I don’t know where the user’s cursor is. But your plugin does seem to know because it inserts and adds blocks in the right spot.

In the example I posted above, I would need to run a workflow where I get the text “BLOCK #1” because that’s where the user’s cursor is. I don’t need to know what’s in BLOCK #2 or BLOCK #3

Let me know if you need me to clarify.

@wesfrank At this moment this is not supported by the plugin. Could you describe your use-case so I have a better understanding of this feature? I will put it on my list either way to see if this is possible to implement :slight_smile:

DM’d you!

Hi Thimo,
i’m just testing this out for my app. It’s a notetaking app that saves the content of your editor to the bubble database. One feature of my app is that users can email their notes to themselves. When I try this, the contents of the note gets rendered as json in my email client. Just wondering if there is an easy way of getting it to render like it appears in the editor, or does this require some custom coding.
thanks

Besides JSON, the plugin also supports HTML output you can use in your case for your emails :slightly_smiling_face:

Thanks, i’m new to this. So I think a way to do it would be to have an extra field in my notes data type and put the html output in that field, which I could then use for the body of the email. I have done this now and it sends the actual html code to the email recipient rather then the output I see in the editor. I’m not sure but it seems like I have to use some sort of api to send the code and then get converted into rendered html, is that right? :heart_eyes:

@pomahoney yes you are saving the HTML correctly!

Depending on the email provider, if you are using Sendgrid you can use triple brackets like this: {{{parameter_name}}} in your email template to not escape the HTML :slightly_smiling_face:

Thanks! Yes I tried using postmark api and it worked with the triple brackets. :+1:

Hi, @Thimo !

Thanks for the plugin, I’ve tested almost all Rich Text plugins and this is definitely the best.

One thing that I can’t get working is the embed services on the exported HTML.

I’m trying to include an Instagram post and a youtube video, but when I try using the HTML they are not included.

I noticed that it works fine with the “only read mode”, but as it’s a blog I believe that the exported HTML will give us better SEO because of the semantic tags (instead of divs) and a bit of performance gain when we don’t have to load the plugin on the post page.

This is the post using the editor ‘only read mode’ with JSON:

This is the same post using the exported HTML:

Is there anything I can do to include the embed services in the HTML?

Thanks very much!

1 Like

Hi @weverson this is true as the embed sections are not supported right now in the HTML output and will get ignored at this moment. I will need to look into creating a custom HTML parser for this block. I will send you a PM with more info :slightly_smiling_face:

1 Like

Hi Thimo,
have one more problem with sending the html output of the editor by email. If I have an image link in the editor content, it puts an incomplete url for image. The http part is missing.


I understand this is something bubble does, but is there any way around this? Beginning to think I’m better off saving the images separately from the editor. Cheers

I just pushed an update (1.28.0) dat includes ‘https:’ infront of the uploaded image URL :slight_smile:

2 Likes

Mille mille gracie Them! Works great!

Hi @Thimo . Thanks for this great plug-in.
Is it possible to add a video file with it ?

Hi @alban.libetlou! You can embed videos from Youtube, Vimeo etc. by just pasting the video URL in the editor. It will automatically embed the video for you :slight_smile:
Uploading video files is not yet supported, but I have placed it on my list to look into for a future update !

Great, thanks for the quick response @Thimo !!
Another question, is it possible to create columns with its text blocks? (I imagine that on the Responsive side it is particularly complex)

Not sure if I understand this feature exactly, but as this is a block style text editor you can only place blocks vertically and not horizontally. Does this make sense? :slight_smile:

Hey @Thimo. I’m loving the plugin. I am having an issue where my text is not wrapping within the element. Can you help me with this?