Link to plugin page: https://zeroqode.com/plugin/zq-rich-text-editor-1527080205468x894712503856267300
Demo to preview the settings
Introduction
Completely rewritten from the ground up, the RTE plugin just got smarter with the new version 2.0. Lighter and more efficient code made the plugin element simple to use and feature-rich.
Rich Text Editor toolbar comes equipped with bold, italic, underline options to attaching a link or uploading a file (image). Change the heading size or choose from more than 20 fonts.
This plugin supports lightweight mode, mentions, hashtags, pasting images from the clipboard and other useful features that make this plugin a really powerful WYSIWYG Editor.
How to setup
- Install plugin via Plugin Tab
2. Place ZQ RTE element on page and set the proprieties accordingly.
3. You're all set to go!
Plugin Element Proprieties
The plugin comes with 2 elements which can used on page to get access to actions, events and states.
ZQ RTE - is a clean, toolbar theme.
ZQ RTE lite - simple tooltip based theme.
Plugin Proprieties
Both elements ZQ RTE and ZQ RTE Lite have same set of proprieties.
Title | Description | Type |
content | set initial content for RTE (can be either Static or Dynamic Data) ; Should be Text Type | string |
Placeholder | set a placeholder text for RTE (can be either Static or Dynamic Data) ; Should be Text Type | string |
Maximum Characters | set a limit for characters ; Should be a Number Type | string |
Read Only | set the mode to make the RTE in Read Only | yes/no |
Mentions | set the datatype from Database for mentions ; Should be Text Type | app type |
Mentions Captions | set the Column name from the datatype for mentions | field of mentions, text |
Mentions List | search through list of mentions from Database | source of mentions, list of text |
Mentions List (text) | Use this field when mentions source type is "text” | list of text |
Hashtags | set the datatype from Database for hashtags ; Should be Text Type | app type |
Hashtags Captions | set the Column name from the datatype for hashtags | field of hashtags, text |
Hashtags List | search through list of hashtags from Database | source of hashtags, list of text |
Hashtags List (text) | Use this field when hashtags source type is "text” | list of text |
Banned Words, Links | Words and links that you may want to ban. | text |
Border Color | Border color for the RTE | color |
Bold | Bold option in the toolbar | yes/no |
Italic | Bold option in the toolbar | yes/no |
Underline | Bold option in the toolbar | yes/no |
Strike | Bold option in the toolbar | yes/no |
Blockquote | Bold option in the toolbar | yes/no |
Code block | Bold option in the toolbar | yes/no |
Header | Bold option in the toolbar | yes/no |
Size | Bold option in the toolbar | yes/no |
List | Bold option in the toolbar | yes/no |
Script | Bold option in the toolbar | yes/no |
Direction | Bold option in the toolbar | yes/no |
Indent | Bold option in the toolbar | yes/no |
Color and Background | Bold option in the toolbar | yes/no |
Line height | Bold option in the toolbar | yes/no |
Font | Bold option in the toolbar | yes/no |
align | Bold option in the toolbar | yes/no |
clean | Bold option in the toolbar | yes/no |
Emoji Toolbar | Bold option in the toolbar | yes/no |
Emoji Textarea | Bold option in the toolbar | yes/no |
Link | Bold option in the toolbar | yes/no |
video | Bold option in the toolbar | yes/no |
image | Bold option in the toolbar | yes/no |
RTE Content Resizable | When checkbox is checked, the RTE element size will fit the content | yes/no |
Toolbar postion | Choices: Top,Bottom | dropdown |
Processing Images | ||
Max Width | Default: 500 | number |
Max Height | Default: 500 | number |
Upload to Bubble AWS | When checkbox is checked an image will be uploaded in Bubble File Manager | yes/no |
Upload to Private AWS | When checkbox is checked an image will be uploaded in your AWS S3 | yes/no |
Folder structure | Structure to be used for uploaded files. If folder_name/uuid_filename is chosen, provide the 'Folder name' value below. If in this case the 'Folder name' is not indicated, the folder name 'unknown' will be used | dropdown |
folderName | The name to be used for the user folder on S3 bucket. Is used only if the 'Folder structure' property is set to 'folder name/uuid filename'. | text |
Filenames prefix | Add a prefix. For prefix do not use any special characters like: ! $ # @ etc … | text |
Image max size (KB) | Image size limit in KB. To notify the user about image limits exceeding, use the event "the image is too large” | number |
add “{” as a trigger for a dropdown | add “{” as a trigger for a dropdown, filled Hashtags fields required | yes/no |
Default font | Choices: Arial,Courier,Garamond,Tahoma,Roboto,Roboto Serif,Shizuru,Open Sans,Tahoma,Times New Roman,Verdana,Lato,Gideon Roman,Montserrat,Roboto Condensed,Redressed,Poppins,Source Sans Pro,Oswald,RobotoMono,Noto Sans,Raleway,Ubuntu,Nunito,Noto Serif Display,PT Sans,Roboto Slab,Playfair Display,Merriweather,Inter,Mukta,Rubik,Open Sans Condensed,Lora,Nunito Sans,Work Sans,Nanum Gothic,Quicksand,Fira Sans,PT Serif,Titillium Web | dropdown |
Auto Detect Url | yes/no |
Please check that you set the correct type for mentions, hashtags and columns which will be used for displaying these respective values.
Plugin Actions
Title | Description |
Enable User Input | Enables RTE element's input form |
Disable User Input | Disables RTE element's input form |
Blur | Removes focus from RTE element's input form |
Set Text/HTML | Sets text value into RTE element's input form |
Update Content | Updates the content of RTE element's input form by setting the index , text and delete options for the action |
Delete Text | Deletes text of RTE element's input form by setting index and length in number type |
Reset | Resets the content of RTE element |
Focus | Focuses on RTE element's input form |
Plugin Events
Title | Description |
Selection Changed | Triggers when user changes selection. |
Text Changed | Triggers when user changes editor content. |
Typing | Triggers when someone typing in the RTE. |
Stop Typing | Triggers when someone stop typing in the RTE. |
Limit Reached | Triggers when characters limit reached. |
Blured | Triggers when editor blured. |
Mention Clicked | Triggers when a mention is clicked. |
Hashtag Clicked | Triggers when a hashtag is clicked. |
Focused | Triggers when editor Focused. |
The image is too large | Triggers when image is too large |
AWS Image Uploaded | Triggers when Image Uploaded |
Plugin States
Title | Description | Type |
RTE Enabled | Publish editor read-only state | yes/no |
Last Selection | Publish user last selection | text |
Text | All the content of RTE | text |
Content Length | Returns the RTE content length | number |
HTML | Return whole editor html | text |
User Typing | Return user typing state | yes/no |
Last Clicked Mention ID | Returns last clicked mention id. | text |
Last Clicked Hashtag ID | Returns last clicked hashtag id. | text |
Used Mentions ID's | Returns all used mentions id's. | list of text |
Used Hashtags ID's | Returns all used hashtags id's. | list of text |
Banned Words | Banned words and links | list of text |
Cursor index | current cursor index | number |
Font RTE | current font rte | text |
URL AWS Image | image uploaded URL | text |
Changelogs
Update: 28/12/2020 -
- Fixed problem with the cursor
Update: 08/02/2021 -
- Fixed minor bug
Update: 26/02/2021 -
- Fixed the problem with states Mention and Hashtag
Update: 26/02/2021-
- Minor fixes
Update: 12/03/2021 -
- fixed problem with an empty value
Update: 29/03/2021 -
- fixed problem with the 's HTML state.
Update: 31/03/2021 -
- fixed problem with the 's HTML state (initial content).
Update: 05/04/2021 -
- Fixed problem with states.
Update: 02/06/2021 - Version 1.83.0
- eliminated conflict between ZQ RTE and Bubbles RTE
Update: 10/06/2021 - Version 1.84.0
- eliminated emoji button from top-right ZQLiteRTE
Update: 4/08/21 - Version: 1.89.0
- fixed problem with resizable and dynamic content
Update: 26/08/21 - Version 1.90.0
- Fixed reset action, height counting in popup, max limit chars, and removed extra line break
Update: 15/09/21 - Version 1.91.0
- removed extra linebreak
Update 03.11.21 - Version 1.92.0
- improved editor with emoji's short name
Update 13.11.21 - Version 1.93.0
- fixed the problem with updating content
Update 07.02.22 - Version 1.96.0
- fixed problem with pop-up height.
Update 02.03.22 - Version 1.98.0
- has been added the possibility to resize images dynamically
Update 17.05.22 - Version 1.102.0
- fixed problem with resizing images
Update 21.06.22 - Version 1.103.0
- fixed the limit of the max number of characters.
Update 21.06.22 - Version 1.104.0
- emoji display fix
Update 05.07.22 - Version 1.107.0
- small updates on documentation fields
Update 06.07.22 - Version 1.108.0
- fixed the max number of characters for the RTE Lite element
Update 08.08.22 - Version 1.111.0
- fixed focus when creating a hashtag
Update 08.08.22 - Version 1.111.0
- fixed focus when creating a hashtag
Update 09.08.22 - Version 1.112.0
- Fixed toolbar position - bottom
Update 22.08.22 - Version1.113.0
- Added default font option.
- Fixed selecting font on Lite RTE.
Update 25.08.22 - Version: 1.114.0.
- Fixed "focus" action in RTE Lite element
Update 29.08.22 - Version: 1.115.0.
- Added possibility to choose hashtag type of text
Update 02.09.22 - Version: 1.117.0.
- added the possibility to change data type - "text" for mentions and hashtags.
- Fixed font and added option to select default font.
- Removed "null" from the hashtag list
Update 08.09.22 - Version: 1.119.0.
- fixed image pasting in RTE when "Upload to AWS" is enabled
Update 05.10.22 - Version: 1.121.0.
- improved auto-detect of hyperlinks
Update 02.01.23 - Version: 1.126.0
- minor fixes
Update 31.01.23 - Version: 1.129.0
- Added option "Upload to Private AWS”
Update 11.04.23 - Version: 1.133.0
- Added "Stop Typing delay" field
Update 25.04.23 - Version: 1.134.0
- Fixed image uploading feature.
Update 16.05.23 - Version: 1.135.0
- Fixed content resizable after an image is uploaded & auto-binding.