Advanced Rich Text Editor

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

  1. Install plugin via Plugin Tab
Image without caption
2. Place ZQ RTE element on page and set the proprieties accordingly.
Image without caption
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.
Image without caption
ZQ RTE lite - simple tooltip based theme.
Image without caption

Plugin Proprieties

Image without caption
Image without caption
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

Image without caption
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.