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 below), but you can create your own plugins as well. Create plugin article explains how to do that.

Align

Align

Adds aligning options for your content.

Char Counter

Char Counter

Limits the number of inserted characters in the editor.

Code Beautifier

Code Beautifier

Beautifies the code inside the code view mode.

Code View

Code View

Enables code view for the editor content.

Colors

Colors

Adds the possibility to change the background and text colors.

Draggable

Draggable

Adds the capability to drag content. E.g.: images, videos.

Embedly

Embedly

Embeds any content from the web in the editor

Emoticons

Emoticons

Makes your users smile

Entities

Entities

Converts characters to special HTML entities.

Files Manager

Files Manager

Browse and delete files on your server.

File

File

Upload/Download any kind of files.

Font Awesome

Font Awesome

Insert Font Awesome icons in the editor text.

Font Family

Font Family

Allows users to select from different font types.

Font Size

Font Size

Allows users to change the font size with pixel precision.

Fullscreen

Fullscreen

Adds the option to open the editor in fullscreen.

Help

Help

Displays the available shortcuts inside the editor.

Image

Image

Enables advanced image editing.

Image Manager

Image Manager

Browse and delete images on your server.

Image Tui

Image Tui

Embelish your images with filters, frames, stickers, touch-up tools and more.

Inline Class

Inline Class

Define custom classes for selected text.

Inline Style

Inline Style

Define custom styles for selected text.

Line Breaker

Line Breaker

Helper to add new lines between elements such as tables.

Line Height

Line Height

Allows users to select the line height for the current selected paragraph.

Link

Enables advanced link editing.

Lists

Lists

Allows users to insert lists in the editor.

Markdown Support

Markdown Support

Format text content in the editor using predefined markdown syntax.

Paragraph Format

Paragraph Format

Allows users to change the type of a paragraph.

Paragraph Style

Paragraph Style

Allows users to choose a style for a paragraph.

Print

Print

Adds the print option to the toolbar.

Quick Insert

Quick Insert

Helper to add images, tables and other stuff easier.

Quote

Quote

Adds the capability of handling multiple quote levels.

Save

Save

Enables saving content inside the editor using AJAX.

Special Characters

Special Characters

Adds the possibility to insers special characters.

Spell Checker

Spell Checker

Allows the user to see and correct spelling errors while typing.

Track Changes

Track Changes

Track changes like new or deleted content and style and formatting changes.

Table

Table

Basic and advanced operations on cells, rows and columns.

URL

URL

Convert text to URL as you type.

Video

Video

Easily insert videos by URL or by embedded code.

Word Paste

Word Paste

Cleans the HTML pasted from Word.

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_120593103" 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_779915847" 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_1336916939" 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>