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

Froala Editor v4.1.3 is Here LEARN MORE

Pricing
Get Started
  1. Home
  2. WYSIWYG Editor
  3. v2.0
  4. Easy To Extend
Skip to content

How to extend Froala Editor?

Our customers say it's easy. Let's see why!

artstation

Fantastic Architecture. Simple to extend.

ArtStation needed a WYSIWYG HTML editor for media heavy content and Froala was the one to meet their expectations.


Read story

A pen drawing of a paint rolling mop with a fresh roll and clean handle.

Design

Every website is unique, but Froala WYSIWYG HTML Editor has been designed to fit every single one.​

A pen drawing of a book with four lines representing lines of text and a folded book mark.

Concepts

Want a better understanding on how stuff works? Our concept docs will make it crystal clear for you.

A pen drawing of a folder with a magnifying glass overlooking the cover.

Examples

Live working examples with custom elements are always a good starting point for any project.

Pen drawing of paper stacks with three lines representing sheets.

Existing Plugins

Easily add new functionality to the Javascript rich text editor by using existing plugins as a basis.

Editor Themes

Your own design.

Personalize Froala WYSIWYG HTML Editor just the way you want by choosing one of our themes or building your own.

Read More

A pen drawing of a book with four lines representing lines of text and a folded book mark.

Concepts

Get in-depth information on how to successfully extend the Froala WYSIWYG HTML Editor:

Custom Elements

Save

Media

A pen drawing of a folder with a magnifying glass overlooking the cover.

Examples

Our editor is built with an architecture that allows you to easily create custom elements and add them to the Javascript rich text editor:

Existing Plugins

You have the freedom to create the most impressive functionality seen in a WYSIWYG editor so far. Almost everyone starts with an existing plugin.

See Plugins

Froala WYSIWYG HTML Editor

Still not sure where to start?

If you can't find an answer, check out our Help Center page or contact our Support team.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_752886185" 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_158209129" 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_2102391995" 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>