Forum Academy Marketplace Showcase Pricing Features

Plugin Announcement: Rich Text Editor

Same here, in a Popup the Initial Content doesn’t update when new Data is sent to the Group. All other field on the same form update as expected.

Big news!
I’ve figured out how to add some CSS to create granular control over the rich text editor! (use at your own risk)

In the “Page HTML Header” you need to add code like this:

<style>
.ql-container {
font-size: 100%;
}
.ql-snow .ql-picker {
display:none;
visibility:hidden
}
.ql-formats:first-of-type {
display:none;
visibility:hidden
}
.ql-formats:nth-child(3) {
display:none;
visibility:hidden
}
.ql-formats:nth-child(4) {
display:none;
visibility:hidden
}
.ql-editor {
font-family: "Noto Serif SC";
font-size: 20px;
}
p.ql-editor, h1.ql-editor, h2.ql-editor, {
line-height: 1.5;
}
</style>

To explain,

  • .ql-formats:nth-child(#) will allow you to select which of the groupings of options you can hide.
  • .ql-snow .ql-picker will allow you to hide the font options
  • .ql editor will allow you to change the font used when writing.
  • If you’d like to do more than this, you’ll need to learn some CSS, opening up your chrome inspector, and playing with styles until you figure out what does what. (That’s what I did)

@gf_wolfer @J805 @dee I think you may be interested in this.

2 Likes

Thanks. I just wish Bubble would implement this themselves. Would be so much easier. :blush:

Sure, I agree. But they’ve got a lot on their plate. Plus there are wayyy more critical things they could be doing I’m sure.

Such as fixing how the images are displayed in RTE (so I don’t have to do :find&replace [img] with [img width=100%] to make sure the image renders properly when I display it.

Or even more importantly make it so that users can’t upload monster images in the RTE (also, making sure that the AWS and CoudFlare optimizations apply to images within the RTE).

2 Likes

Great stuff, thanks!

1 Like

If only Bubble thought to consult with a number of other developers who made this RTE work before…

This is great, thank you! Just implemented in my app :white_check_mark:

1 Like

@sam8 — Quick question — My team is asking for Grammarly to integrate with the rich text editor (as we’re using this to send messages to our members all day every day).

As I type this right now in the forum, my Grammarly extension is kicking in and making recommendations. But when we use the RTE or even the text input in our bubble app, Grammarly doesn’t recognize it. I have no idea where to start on this but I’m guessing it’s not a huge lift.

Is this something your team has looked into? If not, can I champion it?

Anyone find any workarounds for “reset data?” This plugin has been around for almost a year and I still can’t reset the data? (Not reset inputs, I need the element to reset when the parent popup is hidden.)

Hi @maryfox20 :wave:,

Bubble disabled Grammarly for text inputs by adding the “data-gramm” attribute. (Probably because of this post)

A “dirty” workaround is to remove this attribute on page load with JS.
Add the following Javascript (Toolbox plugin)

For the Rich Text inputs
document.getElementById("richtext-editor-0").getElementsByClassName("ql-editor")[0].removeAttribute("data-gramm");

For Multiline inputs (Add an ID to your element)
document.getElementById("YourID").removeAttribute("data-gramm_editor");

@allenyang , I would also like to add that your last build 1.6.6 is broken, can this be fixed soon ? as I need the “undo keyboard shortcut” to work. Thanks

2 Likes

thanks for the clarity! Appreciate it.

1 Like

Do check this one:

Data can easily be reset and many more functions are available in a native format :slight_smile:

1 Like

I’m having more issues with this plugin. It seems if you load some initial content into the editor, that content can’t really be edited. I don’t have it set on autobind or autosave, yet when I try to delete some of the initial content, it test just comes right back. Anyone else experiencing this?

@allenyang I think I’ve figured the issue out. When the RTE is set to “Extend to Fit” editing is almost impossible. When text is edited or deleted, it almost immediately goes back to the initial content. It doesn’t revert until you press enter and try and go to the next line. See the screenshot video below highlighting the issue.

https://www.awesomescreenshot.com/video/2339289?key=1776146d8ceda2f01336340d4800ca1f

Thanks for capturing this - could you file it as a bug report please?

Yes, @blake1 I have the same issue.

I also have a problem that doesn´t let users do a copy and paste, and when the RTE has a lot of text, it freezes and never responds.

@allenyang, I filed the reports like 3 weeks ago, hope the team can take a look.

Thanks in advance :slightly_smiling_face: :computer:

same issue than @blake1 @hacker . I also filled up a bug report the 23th of December about it.