Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Out Of the Box Plugins!

Plug and play features to create your own version of the Froala WYSIWYG HTML Editor.
artstation

Don't reinvent the wheel.

"Froala was a perfect match having a great user experience and out-of-the-box features." — Phil Freo, Close.io


Read story

A large three by three square made up of smaller squares with the center square being a different color.

30+ Plugins

Our rich text editor has over 30 plugins to choose from and use out of the box in you project.​

A gray square image divided into four puzzle piece quadrants with the top right quadrant in blue.

Plug & Play

Include the plugin you need for the rich text editor and you’re ready to start playing.

Sound switchboard with three settings at different levels colored in blue with a white background.

Customize

With lots of well documented options for each plugin, the editor can be customized in seconds.

A vertical view of a stack of documents with gray lines and a red square resting on top of them.

Extend

All of the plugins’ code is all well commented and simple to use as a basis for your own plugins.

Froala Plugins

Image

Basic image editing.

Draggable

Drag and drop elements.

Advanced link editing.

Code View

View editor content code.

Code Beautifier

Beautify the code view.

Emoticons

Makes your users smile.

Font Family

Select different font type.

Font Size

Change the font size.

Paragraph Format

Change the paragraph type.

Lists

Insert lists in the editor.

Table

Basic and advanced tables.

Word

Clean Word and Excel paste.

Video

Multiple ways to insert videos.

Line Breaker

Add new line between blocks.

Inline Class

Add inline classes on selected text.

Inline Style

Add styles on selected text.

File

Upload any kind of files.

Colors

Background and text colors.

Fullscreen

Edit content in fullscreen.

#

Char Counter

Limits or counts characters.

Align

Align editor content.

&entity;

Entities

Use HTML entities.

Help

See shortcuts in the editor.

Line Height

Change the line height.

Image Manager

Browse and delete images.

Paragraph Style

Add style to a paragraph.

Print

Print editor content.

Quick Insert

Insert elements easier.

Quote

Add quotes in the editor.

Save

Enable AJAX saving.

Ω

Special Characters

Insert special characters.

Url

Convert to URL as you type.

Third Party Plugins

TUI Editor

Advanced image editing.

Spellchecker

Spell check as you type.

∑√

Wiris

Edit equations and formulas.

Tribute.js

Mentions inside the editor.


Embed.ly

Embed rich content.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1012506128" 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_983210388" 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_1116400631" 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>