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.


Admin Section Froala


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




Front-end Froala


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.

 

In-depth Look & Features


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


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.


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


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.


 


Colorful

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.


 

Table

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 Link & Button 

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:

 


Example


 


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