Froala Customization Project

Froala is a next generation WYSIWYG “What You See Is What You Get” HTML webpage editor which features a simple Toolbar and an excellent Source Code editor. It is possible to customize the Froala Toolbars to use CSS styles used by your website by editing the Javascript plugin files.

For many years I.T.ZAP Website Design Works have used a modified version of “CK Editor” as a HTML webpage editor for the Ecommerce Templates Shopping Cart software. Watch the video demonstration here. While quite effective, the Toolbars are perhaps a little compex for the inexperienced user. Also, CK Editor does not appear to be supported by Ecommerce Templates any longer. Thus the reason to begin this project to customize Froala in a similar fashion.

Sample of a modified Froala Toolbar

• How to activate Froala in your Ecommerce Templates Administration Panel
  1. Download the Froala HTML Editor from Ecommerce Templates =>
  2. UnZip the file you downloaded.
  3. Copy CTRL + C and Paste CTRL + V the entire “froala” folder into your website folder named “vsadmin”
  4. Upload the entire “vsadmin\froala” folder to your website server.
  5. Add entries to your Ecommerce Templates configuration file named “vsadmin\includes.php” to activate the Froala HTML Editor.

     

     More information about the “froala-custom.css” file contents further on.

  6. Login to your website Administration Panel, [M]odify any webpage and check that the Froala HTML Editor now appears.
     If not, press CTRL + F5 to force refresh and load recently added Froala files.
• All about the Froala CSS Stylesheets

  Upon editing a webpage in the Administration Panel, “vsadmin\adminprods.php” loads numerous Froala CSS stylesheets.

  

  • “vsadmin\ectadmincustom.css” contains overrides to entries in “vsadmin\adminstyle.css” that interfere with the correct appearance of Froala drop-down menus.
  • Download my ectadmincustom.css file here =>

  

  • Loading Font Awesome v4.7.0 Icons would be preferred for my purposes, since I use those to display Fancy Unordered Bullet Lists like you see here. However, it is simple to load the v4.7.0 icon set in “froala-custom.css”. So this is not an important issue.
  • There are various CSS style sheets loaded which are used display the Froala HTML Editor in the back end Ecommerce Templates Administration Panel.
  • As you enter content into a webpage Short and Long Description, Froala inserts it's own class=“fr-names”.
    In the “vsadmin\froala\css” folder there is a file named “froala_editor.pkgd.min.css”.
    I presume this is intended to style content on your front end webpage.
  • I do not intend to use any Froala CSS styles whatsoever. I have my own front end styles for everything required. The Froala class names can remain in the webpage HTML code. They will be harmless and have no effect.
  • “vsadmin\adminprods.php” also loads “../css/ectstyle.css” and “../css/style.css”, which I presume are used for styling the front end appearance of Ecommerce Templates website designs. I do not favour this method because that will load so much irrelevant CSS like Header, Footer, product.php and category.php. None of this is used in the content area of your front end product and article webpages and simply complicates matters.

  froala-custom.css

  “../css/froala-custom.css” is my preferred method for loading CSS styles into the Froala HTML Editor. This contains only styles used in the content area of your front end webpage, such as:

  • Body and Heading Font Family.
  • Paragraph, links, website colors.
  • Code font and Table styles.
  • Responsive Embed YouTube Video or Google Map <iframe> code in between <div class=“video”>, <p class=“video”>, <div class=“video100”> or <p class=“video100”> tags.
  • Fancy Unordered Bullet Lists.
  • Please note that you will need to modify “froala-custom.css” to match your own front end website styles.
  • You are welcome to use any styles contained in “froala-custom.css” on your own website. Note that you will need to copy those styles across into your front end website CSS style sheet.
• Off topic, but how to Self Host Fast Loading Webfonts
  1. Visit Google Fonts and download the fonts you wish to use. Save and Unzip into the “webfonts” folder.
  2. Watch the Kevin Powell YouTube Video here =>
  3. Visit a website like CloudConvert to convert selected TTF font files to much smaller WOFF2 files. Save those WOFF2 files in the appropriate “webfonts” folder.
  4. Upload the entire “webfonts” folder to your server.

  How to load webfonts

  In my CSS folder, view the sample “webfonts.css” file to see how selected WOFF2 font styles are loaded. You can edit that file to suit your own website, then upload to server.

  Here is sample code demonstrating how webfonts are loaded into your front end website template and also the Froala Editor.

  My “vsadmin\includes.php” config file contains this entry: $GLOBALS['sslurl']='https://itzap.com.au/';

  

  Load webfonts into your front end website template.

  

  Import webfonts into the Froala HTML Editor. (see “css\froala-custom.css”)

• Where do I find all the Froala Toolbar Javascript files ?
  Look in your website folder named “vsadmin\froala\js\plugins”
• How do I unminify the Froala Toolbar Javascript files ?

  After downloading my “froala-customization-project.zip” file, look in the “vsadmin\froala\js\plugins” folder to find a complete set of unminified Javascript files that you may edit to suit your website.

  All the files in the “vsadmin\froala-modified-by-itzap\js\plugins” folder are unminified Javascript files that I have edited to suit the I.T.ZAP website.

  I use “Sublime Text” software (together with the “JsFormat” package) to unminify the compressed code so that it becomes easily readable and ready for editing. Google search for other software capable of doing this. There are also various websites which can complete this task for you, like Unminify =>

• After editing a Froala Toolbar Javascript file, do I need to minify it again ?
  No, I would not bother. Simply upload the modified Javascript file to your server. After logging in to your website Administration Panel, please note that you will need to press CTRL + F5 to force refresh and load the recently modified Javascript file(s).

Always Paste as Plain Text

• Edit “froala\js\froala_editor.min.js”

  This is an important alteration that you should make first up.

  

  Edit Line 3267 as shown, replace original minified Javascript file and upload to server.

Font Family Menu

• Edit “froala\js\plugins\font_family.min.js”

  

  Edit Lines 14 onward to suit your website. Replace original minified Javascript file and upload to server.

Font Size Menu

• Edit “froala\js\plugins\font_size.min.js”

  This example changes all the font-size entries from “pixels” to “em” units, as used by the Foundation Framework. If you do not wish to do that, then do not edit this Javascript file.

  

  Edit Lines 13 onward, if desired. Replace original minified Javascript file and upload to server.

Font Color Menu

• Edit “froala\js\plugins\colors.min.js”

  This example changes all the font HEX #color code entries to a standard set that I use. If you are happy with the default #color code set, then do not edit this Javascript file.

  

  Edit Lines 15 onward as desired to suit your website. Replace original minified Javascript file and upload to server.

Paragraph Format Menu

• Edit “froala\js\plugins\paragraph_format.min.js”

  In this example the <h1> heading option is omitted because that is always the Product or Article heading and should not be repeated in the webpage content.

  

  Edit Lines 14 onward as shown. Replace original minified Javascript file and upload to server.

Paragraph Style Menu

• Edit “froala\js\plugins\paragraph_style.min.js”

  In this example there are CSS class names to apply to an Introduction Paragraph, center alignments for Images and Captions, styles to apply when embedding <iframe> YouTube Videos or Google Maps and numerous Font Awesome Icon choices for Fancy Unordered Bullet Lists.

  

  Edit Lines 14 onward as desired to suit your website. Replace original minified Javascript file and upload to server.

Insert Image Menu

• Edit “froala\js\plugins\image.min.js”

  Read the Froala Image Plugin Docs =>

  Option 1) Upload Image

  

  Yes, the image is uploaded into the “prodimages” folder. However:

  • There is no option to resize the image.
  • The filesize is not optimized at all for fast load.
  • If this worked exactly like the Ecommerce Templates “Image Manager”, then both those issues would be solved.

  

  Option 2) Insert Image by URL

  

  Presuming you have uploaded an optimized image using the “Image Manager” or other method, then Yes this does work. However:

  • You are required to enter the full absolute URL including domain name, like this:
    “https://itzap.com.au/prodimages/froala-insert-image-by-url-menu.webp”
  • Simply entering: “prodimages/froala-insert-image-by-url-menu.webp” is not sufficient and generates an Error.
  • Surely this could be simplified?

  Option 3) Insert Image by Browsing

  

  • Absolutely useless.
  • If this worked like the CK Editor “Browse Server” function, then this critical issue would be solved.

  

Insert Video Embedded Code Menu

• Edit “froala\js\plugins\video.min.js”

  Read the Froala Video Plugin Docs =>

  Of the three “Insert Video” options available, the “Embedded Code” method clearly works best.

  

  

  The YouTube Video or Google Map <iframe> Embedded Code can be inserted in between a <div class="video100"> or a <p class="video100"> paragraph (using my “froala-custom.css” entries).

  The alternative <div class="video"> or <p class="video"> restricts the <iframe> size to 80% of the page width.

  • Actually, rather than use the “Insert Video Embedded Code Menu”, I found this is all best done in “Source Code” view.

  • The issue I have is that, once Froala has it's way with the source code, it's strips out most of the YouTube Embed <iframe> tags.

  

  • Although the embedded video still plays fine, making this a minor issue, I did attempt to modify the “froala\js\plugins\video.min.js” file to fix this. But without success.

  

Special Characters Menu

• Add “froala\js\plugins\special_characters.min.js” to the Froala Toolbar

  Read the Froala Special Characters article =>

  • Special Characters are very useful when composing webpages. Froala has this Menu Option, but it has not been added to the Froala Toolbar. Can this be done?

  

  The CK Editor “Insert Special Character” menu option was excellent.

• Thank you for reading this article.