Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

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 and stylesheet files. For example, you can use the table plugin by adding the following lines after you include the editor code JS file.

<!-- Include the Tables plugin CSS file -->
<link rel="stylesheet" href="../css/plugins/table.min.css">

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

We have numerous of plugins (listed in the table below), but you can create your own plugins as well. Create plugin article explains how to do that.

Name Description JS to include CSS to include
Align Adds the align option. ../js/plugins/align.min.js -
Char Counter Limits the number of characters that can be inserted in the editor. ../js/plugins/char_counter.min.js ../css/plugins/char_counter.min.css
Code Beautifier Beautifies the code inside the code view mode. ../js/plugins/code_beautifier.min.js -
Code View Enables code view for the editor content. ../js/plugins/code_view.min.js ../css/plugins/code_view.min.css
Colors Adds the possibility to change the background and text colors. ../js/plugins/colors.min.js ../css/plugins/colors.min.css
Draggable Adds to drag content. E.g.: images, videos. ../js/plugins/draggable.min.js ../css/plugins/draggable.min.css
Embedly Embeds any content from the web in the editor ../js/third_party/embedly.min.js ../css/third_party/embedly.min.css
Emoticons Makes your users smile ../js/plugins/emoticons.min.js ../css/plugins/emoticons.min.css
Entities Converts characters to special HTML entities. ../js/plugins/entities.min.js -
File Upload any kind of files and special links will be inserted in the editor to download them. ../js/plugins/file.min.js ../css/plugins/file.min.css
Font Awesome Insert Font Awesome icons in the editor text. ../js/plugins/font_awesome.min.js -
Font Family Allows users to select from different font types. ../js/plugins/font_family.min.js -
Font Size Allows users to change the font size with pixel precision. ../js/plugins/font_size.min.js -
Fullscreen Adds fullscreen option. ../js/plugins/fullscreen.min.js ../css/plugins/fullscreen.min.css
Help Displays the shortcuts inside the editor. ../js/plugins/help.min.js ../css/plugins/help.min.css
Image Enables advanced image editing. ../js/plugins/image.min.js ../css/plugins/image.min.css
Image Manager Browse through and delete images on your server. ../js/plugins/image_manager.min.js ../css/plugins/image_manager.min.css
Image Tui Make photos beautiful in seconds with stunning filters, frames, stickers, touch-up tools and more. ../js/third_party/image_tui.min.js ../css/third_party/image_tui.min.css
Inline Class Define custom classes for selected text. ../js/plugins/inline_class.min.js -
Inline Style Define custom styles for selected text. ../js/plugins/inline_style.min.js -
Line Breaker Helper to add new lines between elements such as tables. ../js/plugins/line_breaker.min.js ../css/plugins/line_breaker.min.css
Line Height Allows users to select the line height for the current selected paragraph. ../js/plugins/line_height.min.js -
Link Enables advanced link editing. ../js/plugins/link.min.js -
Lists Allows users to insert lists in the editor. ../js/plugins/lists.min.js -
Paragraph Format Allows users to change the type of a paragraph. ../js/plugins/paragraph_format.min.js -
Paragraph Style Allows user to choose a style for a paragraph. ../js/plugins/paragraph_style.min.js -
Print Adds print option to the toolbar. ../js/plugins/print.min.js -
Quick Insert Helper to add images, tables and other stuff easier. ../js/plugins/quick_insert.min.js ../css/plugins/quick_insert.min.css
Quote Adds quote option. ../js/plugins/quote.min.js -
Save Enables AJAX saving of the content inside the editor. ../js/plugins/save.min.js -
Special Characters Adds the possibility to insers special characters. ../js/plugins/special_characters.min.js ../css/plugins/special_characters.min.css
Spell Checker Allows the user to see and correct misspellings while typing. ../js/third_party/spell_checker.min.js ../css/plugins/spell_checker.min.css
Table Basic and advanced operations on cells, rows and columns. ../js/plugins/table.min.js ../css/plugins/table.min.css
Url Convert text to URL as you type. ../js/plugins/url.min.js -
Video Easily insert videos by URL or by embedded code. ../js/plugins/video.min.js ../css/plugins/video.min.css
Word Paste Cleans the HTML pasted from Word. ../js/plugins/word_paste.min.js -
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1838348416" 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_1675786173" 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_478626283" 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>