April Savings -  20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Pricing
Get Started
Skip to content

Plugins

About

Using a modular programming structure based on plugins, we managed to improve the WYSIWYG HTML editor's performance, making it more efficient, easier to understand, extend, modify and maintain. The main advantage is that you can include only the plugins that you need, instead of having all of them already in.

Available Plugins

Plugins extend the basic functionality of the rich text editor. To add a plugin, just include its corresponding javascript file. For example, you can use the table plugin by adding the following line between the HTML <head></head> tags.

<!-- Include the Tables plugin javascript file -->
<script src="../js/plugins/tables.min.js"></script>

We have numerous of plugins, but you can create your own plugins as well. Create plugin article explains how to do that.

  • Block Style (/plugins/block_styles.min.js) - define custom styles for text blocks.
  • Background & Text Colors (/plugins/colors.min.js) - adds in the possibility to change the background and text colors.
  • Char Counter (/plugins/char_counter.min.js) - limits the number of characters that can be inserted in the editor.
  • File Upload (/plugins/file_upload.min.js) - upload any kind of files and special links will be inserted in the editor to download them.
  • Font Family (/plugins/font_family.min.js) - allows users to select from different font types.
  • Font Size (/plugins/font_size.min.js) - allows users to change the font size with pixel precision.
  • Fullscreen (/plugins/fullscreen.min.js) - add fullscreen option.
  • Lists (/plugins/lists.min.js) - adds in the lists buttons for inserting simple lists or nested lists.
  • Inline Styles (/plugins/inline_styles.min.js) - define custom styles for selected text.
  • Media Manager (/plugins/media_manager.min.js) - browse through and delete images on your server.
  • Tables (/plugins/tables.min.js) - basic and advanced operations on cells, rows and columns.
  • URLS (/plugins/urls.min.js) - text is converted to URL as you type.
  • Video (/plugins/video.min.js) - easily insert videos by URL or by embedded code.
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1111643785" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_178243803" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_167940231" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>