Plugin Announcement: Rich Text Editor

Where I can find Bubble text element? I want to fox the font in rich text editor basic setting.

do a :find & replace or [url= for [color=#3E8ECF][url=
and a :find & replace of [/url] for [/url][/color]

1 Like

can you please elaborate on using CSS as I don’t know coding.

Hi Allen - will this be resolved any time soon? Thank you

We’re tackling a few of the known RTE bugs currently, but in parallel with other urgent bugs as well. Thanks for your patience here.

What BBCode flavor does this element use?

I’m having a hard time using the code syntax. Very unpredictable what it will do. Most of the times it hoses :boom: everything.

I tried fixing it directly on the database, but then it’s unclear what BBCode is accepted.

I got something working, but then when I used the RTE again it blew everything up.

I created a page where I’ve been troubleshooting: https://rich-text-editor-test.bubbleapps.io/version-test?debug_mode=true


The one upside for all this troubleshooting, is that I figured that I can adjust the size of an image by manipulating the BBCode directly.

[img width=50%]....[/img]
1 Like

@devin.fraze I can’t thank you enough for putting this solution in the thread. It really helped me, and I’m sure a lot of other people, in getting the RTE to a usable standard. Much appreciated :pray:

1 Like

@allenyang and @Bubble,

Running into a problem with the new RTE when the toolbar is set to tooltip. Finding it is getting cut off when used inside of an RG cell if the RTE is not placed far enough down in the RG.

Admittedly, I’m not 100% sure if this is an RTE bug or a responsive design issue as I do have a group that is behind the RTE group that is hidden/collapsed. Either way, figured this wasn’t desired behavior so wanted to pass it along in case it was helpful.

Also, I keep randomly getting this error while working in the editor. It goes away when I do an action elsewhere but wanted to mention it, too.

If there’s a better place for me to submit these, let me know.

P.S. Thanks for y’all’s ongoing work on this. Looking forward to what it will become.

Sorry to hear about these issues! Would you mind submitting a bug report so that our team can investigate? Thanks in advance!

Hey,

I know that @Bubble has worked hard on the RTE, it’s great and we all appreciate it.

But I think it can be much better with having the ability to insert tables. Also you can have a look at this other RTE alternative, it has a lot more features :slightly_smiling_face: :computer:

1 Like

I’m still having issues with this freezing the page with long texts… This is super frustrating…

@sam8 and @allenyang , appreciate y’all’s ongoing work on the RTE. Just wanted to pass some feedback on the RTE along.

This is good to know regarding the reasoning from a security standpoint, but it would still be nice if Bubble had some kind of native support for converting RTE BBCode to HTML.

Perhaps this is something the HTML element itself could do in a “safe” way with approved tags when displaying rich-text content? Currently, it just renders the BBCode tags. :frowning:
image
In my use case, the BBCode tags are a major pain as I want to use the RTE content in an HTML element so as to unlock the ability to associate spans with certain text segments, but I’m having to find/replace the BBCode first for things like H-tags, which feels incredibly “un-Bubbly” as it seems like this should be natively supported.

1 Like

On the subject of BBCode, is it possible to strip away BBCode from RTE input data? Currently, my users paste data into the RTE to be formatted and tabulated by the app. Since it’s rich text, the data is automatically bulleted and indented.

Ideally, I’d like to abstract this away so the user doesn’t have to (it’s not intuitive and the indentations + bullets adversely affect the parsing workflows). I’ve used find and replace to remove the bullet points (•), but the indentations are a bit trickier. Any suggestions would be much appreciated.

EDIT: Looks like the best bet would be to configure the Quill formats. @allenyang is this possible?

1 Like

Also, is anyone else having issues with the RichTextInput’s value is valid (“yes/no”) conditional? I have the This input shouldn’t be empty box checked with no Initial Content yet when I try to save data it’s allowing me to execute on a blank, seemingly invalid input.


ValidIsNo

Update: I was able to comment out some Quill formats, then run the JS in the Toolbox plugin. This allows more granular control, similar to what @devin.fraze posted above. Here’s the code I used if anyone is interested:

var quill = new Quill('#richtext-editor-0', {
    modules: {
        toolbar: [
            'bold', 
             // { 'list': 'bullet' }, 
             // { 'indent': '-1'}, 
             // { 'indent': '+1' }, 
             { 'color': ['black', 'red', 'blue', 'green'] }, 
                 'link', 
                 'clean'
             ]

  },
     formats : [
            "background",
            "bold", 
            "color", 
            "font", 
            "code", 
            "italic", 
            "link", 
            "size", 
            "strike", 
            "script",
            "underline", 
            // “blockquote", 
            "header",
            // “indent", 
            // "list",
            "align", 
            "direction", 
            "code-block", 
            "formula", 
            "image",
            "video"
        ],
 placeholder: 'Enter text here...',
  });

Unfortunately, the editor thinks the input is empty, so I’m working to resolve that issue now.

2 Likes

Hi there,

I think there’s a compatibility is issue with this plugin and the drag and drop group.

So if I have this RTE inside a drag drop group, the user can’t click directly into the text field to start typing. They have to do a font change or click on one of the buttons to activate the text field.

If they click out of the text field, then have to repeat the process to click on one of the buttons or do a font change to re-activate the text field again.

I’m trying to generate text into the Editor.

However there’s no such option. Why?
It doesn’t seem too hard to do?

So I’m being forced to save the text in the DB, and make the Editor display the saved Thing.

However recently I noticed the Editor doesn’t refresh to display the generated text.

Is that a bug?

Can we extend the functionality of the editor ourselves?

Hi @sam8 , I noticed a weird behavior when doing cut & paste (cmd/ctrl X, cmd/ctrl V) within the editor, followed by undo (cmd Z).

Only the “cut” portion is undone, but not the “paste” portion.

The end result is the contents get longer with duplicate text, if I attempt to undo my cut & paste action.

1 Like

Hey,

I am having the same issue as @jayy.
@jayy, have you reported the bug?

Thanks in advance :slightly_smiling_face: :computer:

@hacker not yet, i’m still trying to isolate the bug. Are you using auto-save as well? I’m suspecting that interferes with the undo