Greetings, Bubble users!
Are you looking for a powerful, free plugin to enhance your bubble app’s text editing capabilities?
Look no further than the Quill Rich Text Editor plugin for Bubble.io, a sleek and customizable WYSIWYG editor designed for modern web applications.
Celebrating NOWROZ with the Quill Plugin 🎉
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.
In short,
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:
Here are just a few of the many features that the Quill Rich Text Editor plugin offers:
Actions
The Quill plugin supports a variety of actions that allow you to manipulate text and content within the editor:
Delete Text: Deletes part of the text within the editor.
Set Text: Sets the text of the editor’s contents.
Insert Text: Adds text to a specific point in the editor.
Set Contents: Sets the contents of the editor.
Update Contents: Updates the contents of the editor with Delta (Quill Formatting)
Insert Embed: Inserts embedded content (such as images or videos) into the editor.
Blur: Removes focus from the editor.
Focus: Sets focus on the editor.
Enable: Enables/Disables the editor.
Set Selection: Selects a part of the text.
States
The Quill plugin also provides several states that allow you to retrieve information about the editor’s contents and selection:
Contents: Returns the contents of the editor with Quill formatting.
Length: Returns the length of the editor’s contents.
Text: Returns the plain text of the editor’s contents.
Format: Returns the format of the editor’s selection.
Selection: Returns the current user’s selection.
Triggers
Finally, the Quill plugin includes triggers that allow you to respond to user activity within the editor:
text-change: Triggered when the editor’s contents change.
selection-change: Triggered when the editor’s selection changes.
Get Started with the Quill Plugin
We hope you enjoy using the Quill Rich Text Editor plugin to enhance your no-code applications. Be sure to check back regularly for updates and additional modules!
If you have any questions, comments, or suggestions, please don’t hesitate to let us know. Happy text editing, and happy NOWROZ!
Version update history
March 29, 2023
The Quill Rich Text Editor plugin has a new feature that allows you to insert content in raw HTML format to the editor.
Good afternoon! Thank you for this plugin. I have a few questions.
I installed it, but I don’t understand how to display the content when showing the article (gives out code).
How does it work to display images and videos embedded in the article on different screens? If I load a picture in the web editor, will it adjust to the width of the mobile version?
could you create a demo page where you could see the settings on the plugin work on a live example, including a demonstration of the written article with images and videos?
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.
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!
Hello! Thank you for your kind words and your feedback. I’m glad you found the plugin useful and easy to install.
One of our missions in creating plugins is to combine simplicity and features. In other words, we want to reduce the no-code limits so that everyone can implement their ideas in the best way.
In some plugins, we spend several days just to arrive at the solution of how to simplify the features, without removing them.
I appreciate your support and your review.
If you have any questions or suggestions, please feel free to contact me anytime.
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">
Oh yes, I’m sorry, I didn’t notice that at first. Then everything is cool at all! Thanks for your generosity, the best gift for me would be the ability to add the alt attribute to the image))
You’re welcome.
We’re happy to hear that you like the feature we added to the plugin.
We always try to make our plugin more useful. That’s why we’re also working on adding more tools, such as emoji and other things, that you can use in your posts.
Thanks for this plugin! It solved a lot of the problems which I had with the default Rich Text Editor and all the JS hacks I had ongoing on it.
One thing to look into. I am not able to get round corners working on it. Screenshot below for reference. It shows a gap in the border where the round corners should be.
Hello, we are delighted that this plugin has been able to assist you in bringing your idea to life.
Regarding the UI of the editor, actually, you are working with three containers: the toolbar, text input, and overall frame.
To prevent complexity, some features have only been considered for the overall frame and it’s better to disable features for the two internal components to avoid conflicts.
If you encounter any challenges in implementing this, please let me know and I can create some examples for you.
Ok, you gave me the idea to edit the borders of the elements instead rather than the overall frame. Now showing the Txt Editor with Round corners . Just some minor CSS.
Due to the limitations, we have in building plugins, we are careful to avoid complexity.
It is good that you can add the desired changes to it.
If you and other users think this feature is useful, we can add it to the plugin fields. (Of course, now it is enough to copy your code to the plugin )
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.
Hi, I hope you are doing well. I have one more suggestion to improve the plugin)
Can you remove the gray background (or make it customizable) or lighter in quote mode. And I would also suggest making the text italicized in the quote.
I will attach 2 screenshots (the current version, and what I would like to see).
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:
.ql-toolbar.ql-snow {
display: none;
}
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.
thanks!
. Just some minor CSS.
)
