Templates Plugins Courses

Advanced Rich Text Editor Plugin for Bubble: Filter unwanted html

Hi there,

I am using the Rich Text Editor plugin. Some of my clients now just copy paste texts into the editor. Which can cause unwanted side effects like different styles etc.
But more important they can insert the contenteditable="true" attribute which leads to editable div elements.
Can you disable that somehow? Is there a way to filter unwanted html/attributes/tags etc.?

Thanks,
Stefan

OR are you adding this code now to the html? :zipper_mouth_face:

<div class="ql-editor" data-gramm="false" aria-owns="quill-mention-list" data-placeholder="" style="height: auto; font-family: arial;" contenteditable="true">

Alright, it seems to be your/the editors fault. Updated to the newest version.
But it is still adding <div class="ql-editor" style="font-size: 13px; font-family: Arial;"> to the content, why not just leave it as it is?

Hello @stefan.pointecker,

Thank you for reaching out with your questions.

I appreciate the opportunity to provide clarity on each point you’ve raised.

Regarding the contenteditable attribute, this feature allows users to either edit the content of an element or simply use it in Reading Mode. To illustrate this functionality, our demo page includes a “Read Only Mode” checkbox, which toggles the attribute between “true” and “false”.


You can set its initial value directly within the element itself, as shown in the screenshot bellow:

As for the HTML structure you inquired about, the div class="ql-editor" serves as the initial setup for the rte (rich text editor) element within Bubble.

Any additional text/HTML content that is added to it will be inserted below this class, ensuring a seamless integration into the editor.

Please let us know if that information provided clarity towards your questions and if you have any additional inquiries. :pray:

Looking forward to your reply.

Best regards,
Stefan Chiciuc

Hi Stefan,

I am talking about the output HTML which also includes this div and its attributes. As far as I understand it the attributes/options you are talking about are configuring the editor itself. I do not want to configure the editor I am worried about the HTML which is produced by it. Because I am showing the content on my website and therefore it is styled by the editor (e.g. font size and font family) - it should be my responsibility to style the content.

Here:
Bildschirmfoto 2024-02-09 um 12.25.24

Hello @stefan.pointecker,

Thank you for your message and for providing clarification.

So, if I’ve got it right, you want to hide the div class="ql-editor". Please correct me if I misunderstood.

I’ll share this with our development team to look into further and explore a better solution for your request. In the meantime, I have a simple workaround that might help. You can use the “:find & replace” to hide the entire div and anything else you want to keep out of sight (you can use as many of them as you want):

I hope you find this workaround useful. You can try it out on my test page here: “link to page”.

I’m eager to hear your feedback and any thoughts you have.

Best regards,
Stefan

Hi Stefan,

tbh. this is a poor solution to my problem as it is not fail-safe. If the div changes e.g. someone changes the font or size then it breaks. (Also you would need to remove the closing )
Why is there even a div wrapped around the content? For me it makes just no sense, I want the content - the plain html - of the user’s input. If I need to wrap it and style it I can just do it myself.

Hello @stefan.pointecker,

Thanks for your reply.

I will try to provide some clarification, the div class="ql-editor" is specific to the Quill library which is used for the Rich text editor plugin.

When a div is marked with the ql-editor class, Quill will manage the content within this div, handling things like text input, formatting commands, and the generation of the corresponding HTML output. This makes ql-editor a crucial part of the Quill editor’s structure, enabling the rich text editing features that Quill provides.

I haven’t noticed that. The div can change by switching between read and edit modes, and both can be hidden using “Find and replace”.

I have shared your request with our development team for their review. However, I am unable to provide a specific timeline for when this feature will be implemented.

Thanks again for your patience and understanding. :pray:

Looking forward to your reply.

Best regards,
Stefan

Yeah I get that but that only makes sense if I want to always use the editor when printing the content. In my case (and I can not believe that I am the only one) I just want to print the data, without editor.

Also if the html is wrapped with the ql-editor class, it just makes no sense to add style information for font size etc. - I understand that it is not made by you but of the underlying library.

Thanks anyway for bringing this to the development team, I hope you can figure something out and provide a simple way to only get the content of the editor.

Hello @stefan.pointecker,

Hope this message finds you well.

The “div ql-editor” is intended only for the default text that you enter. If you change the font or background for the text, it will only modify the text inside the default values you initially set for the element will remain the same.

Also you can see how the HTML will look with or without the div ql-editor, removing it may cause differences in appearance and functionality. You can check this test page.

I hope this response has answered your inquiry. Wishing you a great week ahead!

Best regards,
Stefan