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.
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:
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
