Zeroqode Documentation
Search…
Plugins
Templates
ZQ Rich Text Editor Plugin
Link to plugin page: https://zeroqode.com/plugin/zq-rich-text-editor-1527080205468x894712503856267300
Introduction
Rich Text Editor the wysiwyg editor which comes with toolbar equipped from bold, italic, underline options to attaching a link or uploading a file (image). Change the heading size or choose from more fonts.
Note: This plugin is no longer maintained , see ZQ RTE 2.0 - https://docs.zeroqode.com/plugins/zq-rte-plugin-2.0
Getting Started
You can apply the following settings:
Mode
There are three mode types available "Default", "Lite" and "Display Only"
To use “Lite” mode, select some text and an tooltip will appear with RTE toolbar.
Initial content source
The source can be loaded from Bubble database or local (PC) storage.
Initial Content
Based on your previous selection, you can load data to fist display
Placeholder
Place holder will be used in case, no content entered
Stretch to fit content (For Displaying data) [yes/no]
If selected, the height of the RTE container will be automatically calculated.
Read only [yes/no]
If selected, there won't be any way to write new content
Enable shortcuts [yes/no]
Instead clicking on icons, you can allow to write shortcuts to mark text as follow:
# Headers **Bold text** *Italic* ***Bold italic*** ~~Strikethrough~~ - Bullet points 1. Numbered lists [] Checkboxes []() Links
Allow input characters limitation [yes/no]
Set a limited number of characters for your editor
Character limit
Set a limited number of characters for your editor
Enable hashtags [yes/no]
You can allow hashtags in your editor
Hashtags
List of available hashtags separated by comma.
MENTIONS SETTINGS
Enable mentions [yes/no]
You can allow direct marking of people and after saving, you will have all of them available in workflow, for future work
Mentions source
Select database to search for mentions, and identifier, that will be used to locate the proper user.* Make sure you apply list of unique IDs of your table
Data type
Database where will be searched the mentions (Usually user table, but can be whatever else that fwhere are stored your mentions)* Make sure you used proper database name, otherwise the editor will remain empty.
Column Name
Column from which will be loaded data for mentions
LOCAL STORAGE SETTINGS
Local storage field name
You can save temporal data in local storage, so you can abandon them and use once again when you open browser. You just need to specify under which name it will be saved.
Enable autosaving draft to Local storage [yes/no]
Enables autosave while writting
Autosaving Interval (s)
States how often will be content saved
TOOLBAR BUTTONS OPTIONS
Default font
You can specify what font type will be used by default
Default font size (px)
You can specify what font size will be used by default *
You can enable or disable next buttons:
H1,H2,H3,H4,H5,H6, bold text, italic text, underline text, strike text, blockquote,code-block, ordered list, bullet list, superscript, subscript, outdent, indent, text direction, text colour, text background colour, font alignment, video viewer, image, maths formulas, text styling removal, links, font size, fonts
IMAGE SETTINGS
You can paste an image directly from buffer, from example if you made an Print Screen on your PC, you can instantly paste that in editor. Or you can just copy an image from your PC, and again, paste it in editor, it will be automatically added.
Images size and resolution can be controlled as well.
Images max width
This parameter controls how an image is shown in your editor, if you want it to be displayed with full width of the container then just insert 100%
Or you can insert fixed width, for example 500px then all inserted images will be displayed with max width of 500px. Write it without “px” only numbers.
This will not change image resolution.
Resize images
If this is enabled, you can set a custom width to resize, so if a user upload an image with width bigger than 1920px then it will be resized to given width and only then upload to server.
VIDEO SETTINGS
Video Width
For full width write 100%,
for custom width insert just a number, for example, 720
Video Height
Height in pixels
OTHER SETTINGS
Border radius
This will change border radius for default mode.
Tooltip border radius
This will change border radius for tooltips and for Lite mode.
Buttons hover color
This is for buttons from toolbar.
PLUGIN'S EVENTS:
RTE content is changed
Fires whenever the content of Rich text editor changes
You can set custom time when this will be triggered, by default is 1 second.
RTE the limit is reached
Fires whenever the content reached the allowed number of characters
RTE mention is clicked (for displaying data mode)
Fires whenever mention in display mode is clicked
RTE hashtag is clicked (for displaying data mode)
Fires whenever hashtag in display mode is clicked Make Live Changes
ChangeLogs
Update 05/02/21:
- Fixed minor bug
Update 26/02/21:
- Added Emoji and added an option for toggling individual items off.
Update 01/07/21 (Version: 1.85.0):
- Added feature 'RTE resizable'.
Update 03/07/21 (Version: 1.86.0):
- Added feature 'RTE resizable'.
Update 4.08.21 Version: 1.89.0
- fixed problem with resizable and dynamic content.
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 11.01.22 - Version 1.95.0
- А new option for image was added
Demo to preview the settings
Last modified 10d ago