To celebrate Persian New Year, NOWROZ, we’re excited to offer the Quill Rich Text Editor plugin as a gift to the Bubble community.
With its custom toolbar options and modern appearance, the Quill RTE allows your users to create and edit rich text content directly within your app.
But that’s not all! The Quill plugin also supports a variety of actions and events, including setting focus, resetting input, and triggering workflows when text values change.
The Quill Rich Text Editor plugin is an incredibly powerful tool for crafting rich text content in your applications.
Test the Quill Plugin
Want to see the Quill plugin in action? We’ve created a demo app to highlight its features. Check it out using the following link:
Well, Quill.js uses a special format called delta (or content) to store and manipulate the content of the editor.
More about Delta
Delta is a way of representing the content of a Quill.js rich text editor. It is a simple and flexible format that can store text, formatting, images, and other elements. You can use delta to save and load your editor content, or to manipulate it programmatically. For example, you can use delta to insert or delete text, change the font size or color, or add a link. Delta is compatible with bubble platform, which means you can store it in your database and use it later to display or edit your rich text content. Delta is also easy to convert to other formats, such as HTML or plain text, if you need to.
To save the value of the editor in the database, you can easily save it in text form using Content State.
Similarly, you can get the plain text by using text state
In this editor, you do not have the ability to edit images and they are displayed according to the size of the editor and the original size of the photo. But I make demo full responsive, now you can check the Quill responsiveness by change the width of page.
If you go to the demo app, I’ve included some editors with content.
The Quill Rich Text Editor plugin now supports the ability to insert content in raw HTML format.
This means that you can add HTML tags directly into the editor and Quill will understand and render them accordingly.
Most HTML tags are supported by Quill, so you can use a wide range of formatting options in your content.
Additionally, you can use HTML for default content.
It’s always great to receive feedback and suggestions from users like @halmelaifi.
Regarding adding more features to Quill
Regarding adding more features to Quill, it’s great to hear that you are open to suggestions. If there are any specific features or functionalities that you think would be useful for your users, feel free to let me know and I can provide some recommendations or options for implementation.
Hi! I apologize for the long response. At first I installed the standard Rich Text Editor, but I realized that it doesn’t suit me and I was advised to use a plugin. I installed it today and it works fine. I hope it’s SEO friendly, because that’s very important to me. I will write you a good review. Thank you very much for your work!
That’s great! I have a couple of suggestions for improving the plugin. It would be great if you could implement it.
Adding markup for H3.
Right now I can add H1 and H2, but my articles often use H3. Plus, there is a Table of Contents ToC plugin through which you can create content by title. I really miss the H3 there.
Adding alt attribute to an image.
It would be great if when I add an image I could add a caption below the image and that caption would be added to the alt attribute to an image.
The HTML code looks something like this.
<img src="path_to_image.jpg" alt="description of the image">
No problem. The workaround is quite easy.
Thank you for building it. Being able to read the contents of the Textfield in real-time and having a prompt for when the content changes has been a lifesaver.
Currently, you can change the background color, border color, and width in the editor settings. On the other hand, users have the ability to italicize text or use other formats that are available for other texts.
Unfortunately, I didn’t quite understand what you meant. Do you mean to change the defaults?
Topic: Suggestion for a new preset … “No Toolbar”.
Context: I want to have a normal single line input field and be able to read what’s in it in real time.
Example, you are on the User Profile page, and the “Save” button is only enabled if the user changes something, for instance, updates their name.
Name changed → Show Button
As we all know, with the default input field on Bubble, a user has to click outside of the input to register a change in the field. This Quill plugin works so well that I would love to also be able to use it as a standard single-line input field.
But the only issue is that there is no way to remove the Toolbar (or I have not discovered it yet). I’ve tried an empty custom toolbar, but it does not work.
Easy way to implement this on your side:
have a preset with “No Toolbar”
allow a custom toolbar which is empty
build a new plugin for input box with real-time data and no toolbars
For now, I’m bypassing it via CSS doing:
But would be cleaner to have a way to now load the toolbar at all, rather than loading it and hiding it. Particularly to have a cleaner interface in the editor.
Just a suggestion to make this plugin even more enjoyable.