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.

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.

​

Demo to preview the settings