Plugin Announcement: Rich Text Editor

Announcements New features
1

We are excited to announce that we’ve just released the Beta version of an updated Rich Text Editor plugin by Bubble! For the duration of this Beta phase, please report any feedback or bugs you encounter on this thread. The new Rich Text Editor has a modern look and dynamic toolbar options to make the input highly customizable. Here’s an overview of the latest features:

Customizable Editor Properties

Select complexity based on your needs
Not every Rich Text use case requires the full suite of toolbar options. Select ‘Basic’ or ‘Full’ complexity in the property editor to meet your needs as you see fit.

Screen Shot 2020-01-29 at 11.22.43 AM
Screen Shot 2020-01-29 at 11.22.43 AM1192×560 13.3 KB

Toolbar vs. Tooltip
Show the full toolbar menu on the page, or use the subtle tooltip menu to access rich text options when highlighting the text you wish to enhance.

Screen Shot 2020-01-29 at 11.24.57 AM
Screen Shot 2020-01-29 at 11.24.57 AM1194×560 18.6 KB

Media Features

A picture’s worth a thousand words…
Upload an image to the rich text input right from your computer. The image will be saved to the Bubble database, so you never have to worry about losing it. You can resize your images in the rich text input by clicking on them and dragging the corners.

Screen Shot 2020-01-29 at 11.29.09 AM
Screen Shot 2020-01-29 at 11.29.09 AM1196×562 97.1 KB

Actions and Events

Set your focus
Set the focus (cursor) to the end of your rich text content.

Reset the input
Clear out your rich text input or reset it to initial content.

Text change event
Trigger an event when the value of a rich text input changes.

**Note: The legacy version of the Rich Text Editor by Bubble will eventually be deprecated. However, it is still available at the present time, and users that have this plugin installed on their app will still have access to it even after it is deprecated.

58 Likes
2

Perfect timing for me, trying it out asap :+1:

2 Likes
3

Can we have more granular control over the toolbar options?

Use case: I want the Basic options (bold, italic, links) but also the Image option. Using the ‘Full’ toolbar is a little too much for my use case

13 Likes
4

I agree with this! And, noticed that the rich text input being used on the forum seems to have this level of control. Maybe it’s possible or coming for the plugin as well! Would love to be able to only show the tools I want to make available.

3 Likes
5

Can we get the element name changed on one of the plugins? When replacing a legacy input element with the new one they both show up in the dropdown as ‘Rich Text Input’ and there is no way to tell which is the new one and which is the old one.

4 Likes
6

This works very nicely! Huge improvement, thanks!

7

I believe this will make it a more valuable component. I’d like if it was possible to have checkboxes for each of the controls to really customize it so we only have the options available we want our users to have access to.

6 Likes
8

The ability to add custom fonts would be absolutely amazing.

5 Likes
9

Agree that custom font support would make this worth using. Also adding that the ability to copy and a paste a photo into the editor, rather than uploading would be a big bonus too.

4 Likes
10

Great one! Several questions please,

  • What is the output being generated here (HTML / BBCode)?
  • Can we have an option to limit fonts and/or set a default font style from the list of fonts we have?
  • Can we enable tables?

Thanks team…

3 Likes
11

Hi! To address your questions:

  1. The output being generated is in BBCode, so the saved output from the Rich Text Editor can be used in Bubble text elements.
  2. If no font is specified by the Rich Text Editor, you can use the Bubble text element styles to define a default font when you display your rich text. In the editor, you can limit font by choosing the basic complexity option.
  3. Tables are not available in this editor unfortunately
3 Likes
12

This is great feedback! I’ll change the name of the legacy element for clarity.

3 Likes
13

Second this. - Custom fonts.

1 Like
14

+1 fonts. We’re at 3.

Also if at all possible, the native “set focus” action on inputs.

1 Like
15

Via-a-vis fonts: Bubble just uses Google’s font loader lib, right? (I do the same thing in CG Pro to allow custom font support — meaning any Google font OR any Adobe Fonts / “TypeKit” bundle which is all that matters at this point.) Just do that and people will be fine.

(For extra credit, let plugins instantiate multiple of the default styling interface input set. What people are really asking for/complaining about here are artificial limitations of Bubble’s editor interface API. You know what I’m saying.)

16

Could we have an option to center everything as a default? I’m utilizing the “basic” complexity and I would like all of the icons to be centered as well as the text by default.

17

The set focus option is available in this plugin! :slight_smile:

1 Like
18

This is exciting!!

A bug I discovered:

  • “Extend to Fit” doesn’t quite work
2 Likes
19

This is a very exciting new feature. I’ll need this fairly soon. I also would love to see custom fonts!

20

Great update to the editor @sam8. Is this due to replace the rich text editor in the Bubble editor as well once stable? Cheers