When creating a post, such as a blog article, there is a Froala Text Editor which allows modifying styles such as the font size, font colors, boldness and more. 


Also, when members add content to their "ABOUT ME" section, this also uses a text editor which provides members the ability to style and format their content.


There are several text editor options available that either restrict or allow for image upload and video embed. 


These can be used and applied individually via the FORM MANAGER to the respective forms for the members' "ABOUT ME" section and all post types such as:  coupons, properties, classifieds, member articles, website blog articles, etc...


This provides the ability to control if members can add images and video embeds into the text editor input fields of posts and their "ABOUT ME" section.


How To Add The Functionality To Your Website


Sites should already have these enabled by default. However, if they need to be changed or updated, this article will explain how to toggle between the available text editors which all provide slightly different settings.

There are three default versions of the Froala Text Editor that can be used. These editors can be added to any form and can either limit or provide access for uploading images and embedding YouTube videos.


Available Text Editors:
  • Basic Froala Editor
    • No image upload, video embed or source code editor
    • Basic text editor with limited options to edit font size, colors, styles and create bullet check lists.
    • CSS Class: froala-editor

  • Public Froala Editor
    • Allows image upload, video embed, and source code editor
    • CSS Class: froala-editor-user-upload

  • Admin Froala Editor
    • Allows image upload, video embed, source code editor AND allows selecting photos stored in the MEDIA MANAGERfrom your admin area. 
      • Most users will only want to use this editor for their company's blog article descriptions because normally we do not want to give regular members the ability to select from stored photos in the media manager area of the website.
    • CSS Class: froala-editor-admin


Basic Froala Editor - no image upload


The Basic Froala Text Editor includes the following styling options: 
  • Bold
  • Italic
  • Underline
  • Font Size
  • Heading Options
  • Font Color
  • Background Color
  • Alignment
  • Bullet Lists
  • Indent Options
  • Horizontal Line Break


The basic editor only provides basic font formatting. The user CANNOT:
  • Upload images
  • Embed videos 
  • Edit source code
  • Insert web links


Basic Froala Editor Screenshot


Basic Froala Editor Usage 


To add the Basic Froala Text Editor to a form, please follow these instructions:


  1. Go to TOOLBOX >> FORM MANAGER >> SELECT A FORM TO EDIT

    If form is not already active/customized, you can search the form by name and customize it:




  2. Scroll down until you find the Froala widget and click on "Edit".

    ** Please note you may see the widget name as "[widget=Form - Froala Editor Javascript]", or you may find that it is calling an older WYSIWYG editor. We recommend using a fresh form if you see the older WYSIWYG or in the "Field Label Name" section add: [widget=Form - Froala Editor Javascript]




  3. In the "ENTER CSS CLASS" field add: froala-editor



  4. Click on "save changes"


PUBLIC FROALA EDITOR - supports image upload


The Public Froala Text Editor includes the same styling options as the Basic Froala Editor AND it includes the ability to:

  • Upload images
  • Embed YouTube videos 
  • Edit source code
  • Insert web links


Public Froala Editor Screenshot


 

Public Froala Editor Usage 


To add the Public Froala Text Editor to a form, please follow these instructions:


  1. Go to TOOLBOX >> FORM MANAGER >> SELECT A FORM TO EDIT

    If form is not already active/customized, you can search the form by name and customize it:




  2. Scroll down until you find the Froala widget and click on "Edit".

    ** Please note you may see the widget name as "[widget=Form - Froala Editor Javascript]", or you may find that it is calling an older WYSIWYG editor. We recommend using a fresh form if you see the older WYSIWYG or in the "Field Label Name" section add: [widget=Form - Froala Editor Javascript]




  3. In the "ENTER CSS CLASS" field add: froala-editor-user-upload




  4. Click on "save changes"


ADMIN FROALA EDITOR - supports image upload + selecting images from media manager


The Admin Froala Text Editor includes the same styling options as the Basic Froala Editor AND it includes the ability to:

  • Upload images
  • Select and retrieve images that already exist in the website's media manager
* Because of this special access, it's recommended to ONLY USE this text editor for posts that only admins of the website use, not regular members. For example, it would be recommended to use this editor with the website's blog article posts. 
  • Embed YouTube videos 
  • Edit source code
  • Insert web links



Admin Froala Editor Screenshot

The Admin Froala Editor allows users to retrieve images from the Media Manager when editing an article. The image below points to the extra option to select and retrieve images that already exist in the website's media manager.


*  If members have access to the admin text editor, we strongly recommend setting up the Public Froala Editor rather than the Admin Froala Editor for security reasons (members would be able to see all images ever uploaded to the media manager). 


Admin Froala Editor Usage 


To add the Admin Froala Text Editor to a form, please follow these instructions:


  1. Go to TOOLBOX >> FORM MANAGER >> SELECT A FORM TO EDIT

    If form is not already active/customized, you can search the form by name and customize it:




  2. Scroll down until you find the Froala widget and click on "Edit".

    ** Please note you may see the widget name as "[widget=Form - Froala Editor Javascript]", or you may find that it is calling an older WYSIWYG editor. We recommend using a fresh form if you see the older WYSIWYG or in the "Field Label Name" section add: [widget=Form - Froala Editor Javascript]




  3. In the "ENTER CSS CLASS" field add: froala-editor-admin



  4. Click on "save changes"



* You can confirm that the Admin Froala Text Editor is working as it should by logging in as a member that has access to that specific feature and clicking on the "add image" icon. You should see a FOLDER icon:




  1. Clicking on the folder icon will open a pop up with all the media manager images that have been uploaded:



How To Include Images in Admin Blog Articles


To add an image inside the body of a blog article please follow these instructions:


  1. Login as a member that has the ability to write admin blog articles. 
  2. Click on "New Website Blog Article"




  3. Inside the WYSIWYG editor click on the image icon:



  4. Click on "Drop Image"




  5. Select image and click on "Open"

  6. The image will upload in your article  and display as following:




Additional Image Options


  • Allign Image "left", "Centered" or "right"



  • And much more!



How To Embed Youtube and Vimeo Videos


To embed a video in a blog article please follow these instructions:

  1. Login as a member that has the ability to write admin blog articles. 
  2. Click on "Add New Blog"
  3. Click on the "Video" icon:


  4. Paste the link to the video. An acceptable format is: https://youtu.be/BoOt6bJNVR8


  5. Click on "Insert"

  6. The video will now display in your blog article:





  7. To edit the size of the video and change the alignment click on the image inside of the WYSIWYG editor and select the appropriate options: