Everything About Froala WYSIWYG Text Editor

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000050711-everything-about-froala-wysiwyg-text-editor

What is a WYSIWYG Editor?

WYSIWYG is an acronym for "what you see is what you get". In computing, a WYSIWYG editor is a system in which content can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

Where can I find these editors on the BD platform?

WYSIWYG editors can be found in multiple locations both on the admin side and on the front end throughout the BD platform. 

We put together a list down below regarding where to access these.


1. Web Page Builder

My Content --> Web Page Builder --> Click “New Webpage” OR “Edit” on the preferred webpage

WYSIWYG editor options are highlighted below:


2. Forms Inbox

Emails → Forms Inbox → Click on “Reply”

WYSIWYG editor is highlighted down below


3. Compose Emails

Emails → Compose Emails

WYSIWYG editor is highlighted down below


4. Email Templates

Emails → Email Templates → Click “New Email Template” OR “Edit” OR “Customize”

WYSIWYG editor is highlighted down below


The only access that the website members have to the WYSIWYG editor is through the website POSTS

*Posts are anything that members can post via their member dashboard. Click HERE for additional information.

On the image below there is an example of how the editor displays to members when creating a Product post.



All the sections of the software mentioned above have a WYSIWYG . As per default settings, the posts use a Public Version Froala, which means, some features will be different from the Admin Froala. To learn more about the different Froala versions, click on this article FROALA Text Editor: Versions and their Upload Functionalities

Keyboard Shortcuts

Shortcuts allow to activate specific commands by using only the keyboard.

  • Bold: Ctrl + B
  • Italic: Ctrl + I
  • Underline: Ctrl + U
  • Strikethrough: Ctrl +S
  • Increase Indent: Ctrl +]
  • Insert Link: Ctrl + K
  • Insert Image: Ctrl + P
  • Undo: Ctrl + Z

HTML 5: The Froala Rich Text Editor is built respecting and taking advantage of HTML 5 standards.

CSS 3: What better way to improve user experience than using CSS 3? Subtle effects make the editor even greater.

Responsive Design

Content will be responsive. Easily upload images and edit them using the additional Image Options. Click on the following article for more details and information on How to Post Images On WYSIWYG Editors 


Font Family

Select the desired font family. This option will only be available in the admin Froala editor. Click HERE to learn more

Basic Styling

Basic styling, such as bold and italic are built-in in the main code. Perfect for a simple WYSIWYG HTML editor.


Font Size

Change the font size with pixel precision. No more "small", "medium", "large" and nothing between them.



Change the text or background color as desired by selecting from the color palette. The color palette will also have up to 9 custom colors pre-selected to match the Main Website Colors selected through the Color Sets or Design Settings.


Code View

This option will allow users that have knowledge about HTML more control when it comes to creating content.



This functionality allows adding tables to the content of a web page.


Each cell has its own FROALA editor options:


Click on these helpful articles for more information on Tables:

Froala Editor - Tables

Web Page Builder: How Tables, Columns and Rows Behave on Mobile Devices

Line Height 

This option is available to change the spacing between lines of text.


Clear Format

With this option it is now possible to remove styles and formatting when pasting text from another source into the text editor.

After pasting the text highlight it and click on the "Clear Formatting" button to remove styles.


Icon Picker 

Add different icons using this Froala option. This is only available on the admin Froala, click HERE to learn more.


Insert a Link &  Button Option

To add a link select the "insert a link" option and add the information accordingly:


Once the link has been added, it's possible to make it a button. Click on the style option and choose the preferred button:


 This example shows what the Button Danger looks like:


** To learn more about the color of the buttons, click on the following article: Default Button Link Colors