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 BD platform?


WYSIWYG editors can be found on multiple locations both on 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


Edit Web Pages


Content --> Edit Web Pages --> Click “New Webpage” OR “Edit” on preferred webpage





WYSIWYG editor is highlighted down below



SEO Templates


Content --> SEO Templates --> Click "New SEO Template" OR "Edit" on preferred SEO Template





WYSIWYG editor is highlighted down below




Form Inquiries


Emails → Form Inquiries → Click on “Reply to Inquiry”





WYSIWYG editor is highlighted down below




Compose Emails


Emails → Compose Emails


WYSIWYG editor is highlighted down below





Email Templates


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





WYSIWYG editor is highlighted down below




FRONT-END


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


*Posts are anything that members can post via their member dashboard




All post types have a WYSIWYG . 



On the image below there is an example of how the editor displays to members when posting a Blog Article.



IN DEPTH LOOK AND FEATURES





Keyboard Shortcuts


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


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



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. The WYSIWYG editor can handle image resizing.




Clean HTML


An algorithm has been developed that automatically cleans up the HTML output of the rich text editor. Write with no worries, the WYSIWYG HTML editor produces a very clean output, waiting to be crawled by search engines.


Image Alternative


Image alternative is the text shown if the browser can't display the image. It is also text that search engines use, so don't ignore it. Alternative text can be set in the edit image popup.




Basic Styling


Basic styling, such as bold and italic are built-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 desire by selecting from the color palette.




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.




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.







Insert a Link &  Button Option


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





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


 This example shows how the Button Primary will look like:


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