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

[danielnn]

Thank you for building such a great plugin!

I can’t pull a custom state value and show it on the text editor, does this only work for JSON? My application will take some input from the user, run that input through an API and then get an answer back, which then I would like to have it appear in the rich text editor so the user can further customize their result. Is this possible? I can do this on normal text plugins and other rich text editors.

[Thimo]

@csakon

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

Thank you for your nice words @csakon I will put this feature on my list and I might be able to include it in the next update!

[Thimo]

@danielnn

I can’t pull a custom state value and show it on the text editor, does this only work for JSON? My application will take some input from the user, run that input through an API and then get an answer back, which then I would like to have it appear in the rich text editor so the user can further customize their result. Is this possible? I can do this on normal text plugins and other rich text editors.

Hi @danielnn, if you want to show rich text data in the plugin it should be in the JSON format the plugin outputs. You can also display plain text data (non-json data), by using the ‘Display Text’ workflow action. You can see how this works by using the ‘display text’ button on the demo page: Texteditordemo | Bubble Editor

[Thimo]

@Thimo

Thank you for your nice words @csakon I will put this feature on my list and I might be able to include it in the next update!

Update 1.15.0
Added an embed feature that automatically embed links of below services inside the text editor! You can also disable this feature. cc: @csakon

Supported services:

• Facebook
• Instagram
• YouTube
• Twitter
• Twitch
• Miro
• Vimeo
• Gfycat
• Imgur
• Vine
• Aparat
• Yandex.Music
• Coub
• CodePen
• Pinterest

[Future]

very nice plugin as always Thimo.

Few suggestions and observation :

• In your demo, the “inspect” button doesn’t work. CSS conflict?
• Are you thinking about adding translation?
• I can’t see, but a state that shows what was the last change? (usecase : last element changed was a checkbox, checkbox text is “x”, then it’s easy to create tasks or other…)

Nice one again!

[Thimo]

@Future

In your demo, the “inspect” button doesn’t work. CSS conflict?

Thanks for flagging! Just pushed an update that should fix this!

@Future

Are you thinking about adding translation?

Yes, but this is actually quite a big implementation. I will try to prioritize it when I have a couple days to fully focus on it!

@Future

I can’t see, but a state that shows what was the last change? (usecase : last element changed was a checkbox, checkbox text is “x”, then it’s easy to create tasks or other…)

Not sure if I completely understand, but there is a workflow action that gets triggered when the value changes of the editor. You can use this to trigger all kinds of workflows!

[Future]

thanks for the quick reply!

[alonsocarballo]

Hi! Once an image is pasted into the editor, is it possible to resize and/or crop? Also, can the editor display videos stored in the Bubble database?

Thanks

[Thimo]

@alonsocarballo

Hi! Once an image is pasted into the editor, is it possible to resize and/or crop? Also, can the editor display videos stored in the Bubble database?

Hi @alonsocarballo! The plugin does not support resizing/cropping of the original image. You can’t really display videos from your Bubble database right now, but you can embed videos from Youtube, Vimeo etc. in the editor! See this post

[alonsocarballo]

thanks for your reply!

[danielnn]

Hey Thimo, thanks for the reply. Both the JSON format and non-json data is pulling from the “editor” database, although I don’t want to save every API call into a database. I would simply like to show the result of the API on the page, as a custom temporary state. This normally works in the “initial content” of other rich text editors. Is there something similar to this on your plugin?

[Thimo]

Hi @danielnn Just for clarity, the text editor only accepts JSON data that originates from the text editor itself as initial data. So, you can’s use plain text here. If you want to use plain text you will need to use the ‘Display Text’ workflow action (after that you can, optionally, save the output of the text editor to your database for future use. Does this make sense?

[louis2]

Congrats @Thimo, this is an impressive work!

Two questions for you (1 small, 1 big):

• small one: Do you plan to handle # the same way Notion does it for headers ?
• big one: Does it handle real-time collaboration ? Other editors such as bubble’s don’t.

[Thimo]

@louis2

small one: Do you plan to handle # the same way Notion does it for headers ?

Interesting feature idea. I am not sure of the library has support for ‘shortcuts’ like this, but I will look into it!

@louis2

big one: Does it handle real-time collaboration ? Other editors such as bubble’s don’t.

I saw on Github that this is actually on the roadmap for the library. When this is supported I will definitely implement it because it will be a very nice feature to have!

[nassosk]

Hello Thimo,

Your plugin looks very promising! I have a couple of questions, as I am trying to chose which RTE to use.

1. My base use case is this: I want to be able to give my “admin” user the ability to edit text in the text editor and then (in a different page or state) give “non-admin” user the ability simply read this content (NO toolbars and NO editing ability). Much like a blog, if you will. Is that something I could do with your plugin?
2. I am a little concerned as I don’t see anywhere an option to change font type. Is it just me, or is this attribute really fundamental for a RTE?

Thank you in advance!
Nassos

[jamesdevonport]

Nice plugin!

If I wanted to use this to write blog post content is the best way of displaying the content through placing the element on the page in ‘read only’ mode? Do you know if all the header tags etc render correctly for SEO purposes in the read only mode?

[Thimo]

@nassosk

My base use case is this: I want to be able to give my “admin” user the ability to edit text in the text editor and then (in a different page or state) give “non-admin” user the ability simply read this content (NO toolbars and NO editing ability). Much like a blog, if you will. Is that something I could do with your plugin?

Yes the plugin supports a ‘read only mode’. So you can enable that for a non-admin for example

@nassosk

I am a little concerned as I don’t see anywhere an option to change font type. Is it just me, or is this attribute really fundamental for a RTE?

You can change the font type inside the text editor properties, did this answer your question?

[Thimo]

@jamesdevonport

If I wanted to use this to write blog post content is the best way of displaying the content through placing the element on the page in ‘read only’ mode? Do you know if all the header tags etc render correctly for SEO purposes in the read only mode?

When using headers, you will have the option to choose from 6 header tags and they will show up like this (so including the header HTML tag ):

[nassosk]

Thank you for your response, Thimo!

[jyoon025]

Hi Thimo!

Thanks for creating such an amazing plugin.
My app is currently set at a max width of 428 px. And while it looks great on mobile, I noticed that the plugin layout changes according to the width of the web browser and not the app itself. Would it be possible to have the editor layout adjust to the width assigned to the plugin instead?

And would it be possible to have the toolbox popups appear above the elements that are placed in front of the editor?

And lastly, do you have plans to introduce dropdown toggles as an option?

Thanks