Big Announcement - Members and Admins Can Now Upload Images In Froala Editor!

We're excited to announce the BETA launch of allowing for image upload and video embed via the WYSIWYG editor for the admin blog, and all other feature posts (coupons, properties, classifieds, etc). This means uploading images and including them inside the "Details" section of feature posts is now a simple process for all users of your software, including you!

 

We've eliminated the long process requiring both access to the File Manager and the inserting of complex HTML code. Now any user can easily include images inside of the admin blog articles. 

 

How To Add The New Update To Your Website

 

Before adding the latest Froala Editor to your website it is critical that one point be fully understood. There are two versions of the Froala Editor that you can add to your website. You can add this update to ANY of your membership features, which means that your members will now be able to add images to any feature post, whether it be coupons, member blogs, properties, events, or even custom features. 

 

There are essentially two new Froala Editors to choose from: 

Admin Froala EditorPublic Froala Editor


The Admin Froala Editor allows users to retrieve images from the File Manager when editing an article:


PFX3BkV96ziS-QJhzI4WS7ihhuIWkkQqgw.png



The Public Froala Editor allows you upload images while editing the article, but does not allow them to be selected from the list of all uploaded images:


h8t5VTMCzSFdHry42KhCiCTnljjzwJ7zgg.png



If your members have access to the form, 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 your images folder). 



ADMIN FROALA EDITOR


To add the Admin Froala to one of your forms please follow these instructions:


Go to TOOLBOX >> FORM MANAGER >> SELECT FORM YOU WISH TO ADD THE ADMIN FROALA TOScroll 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. 


KhemRDEVEQcDAKJbgYjGee3vmX8uX7PYnA.png


In the "Field Label" section add: [widget=Form - Froala Editor Javascript]In the "CSS CLASS" add: froala-editor-admin

7HZ2UeBwLbUFyYzVtYf_v8CBIxiTGhbgOg.png




Click on "save changes"You can confirm that it 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:


PFX3BkV96ziS-QJhzI4WS7ihhuIWkkQqgw.png




Click on the folder icon will open up all of your website images that have been uploaded inside of your website's FTP:

s7AjiDc3KlJKZy5exS_xGcAmA5avlfHh0Q.png



PUBLIC FROALA EDITOR

 

To add the Public Froala to one of your forms please follow these instructions:


Go to TOOLBOX >> FORM MANAGER >> SELECT FORM YOU WISH TO ADD THE ADMIN FROALA TOScroll 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. 


KhemRDEVEQcDAKJbgYjGee3vmX8uX7PYnA.png


In the "Field Label" section add: [widget=Form - Froala Editor Javascript]In the "CSS CLASS" add: froala-editor-user-upload


AVFtRC2BsEjxNFYR9mAXg9dM4dbWI2Gktg.png




Click on "save changes"You can confirm that it 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 NOT see a folder icon:


h8t5VTMCzSFdHry42KhCiCTnljjzwJ7zgg.png




How To Include Images in Admin Blog Articles

 

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

 

Login as a member that has the ability to write admin blog articles. Click on "Add New Blog"

blob1476999416756.png



Inside the WYSIWYG editor click on the image icon:


blob1477000476720.png



Click on "Drop Image"


blob1476999505813.png




Select image and click on "Open"

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


blob1476999577119.png




Additional Image Options


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


blob1476999756426.png




Insert LinksAdd a Rounded Effect or Bordered Effect


blob1476999860802.png




And much more!



How To Embed Youtube and Vimeo Videos


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


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


blob1476999984697.png




Paste the link to the video. An acceptable format is: https://www.youtube.com/watch?v=eFKfoXLF2xk


blob1477000044470.png



Click on "Insert"

The video will now display in your blog article:


blob1477000125039.png




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:


blob1477000169473.png


3 people like this

Phew, life saver feature. Many thanks.

Just added this today, such a wonderful feature, we love it!

 

Important feature, thanks for adding it!

Login or Signup to post a comment