Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Migrate from TinyMCE

Feature Matching

The following guide shows how Froala editor matches features from TinyMCE. For each of them,there is a jsFiddle and a GIF showing the functionality.


Basic Example

This example highlights the most used features.

example01

Live example (JSfiddle)



Distraction-free Editor

Similary to the TinyMCE Distraction-free editor option, Froala Editor comes with inline toolbar which allows inline editing without any external distractions.

example02

Live example (JSfiddle)




Inline Editor

Inline editing is one of the most appreciated features in Froala Editor. It enables editing the page in a true WYSIWYG manner without any external elements.

example03

Live example (JSfiddle)



Custom Formats

In Froala, you can use Custom Formats with three functions Inline Classes, Inline Styles, and Paragraph Styles.

example04

Live example (JSfiddle)




Custom Toolbar Button

Froala Editor comes with a lot of built-in features and it also allows you to create new buttons in the toolbar if needed. This example highlights how to add a new button that inserts custom HTML.

example05

Live example (JSfiddle)




Custom Toolbar Dropdown

Another very common use-case that WYSIWYG editors have is to create a custom toolbar dropdown. This can be achieved in a similar manner to the toolbar button.

example06

Live example (JSfiddle)



Image Tools

Froala Editor comes with an easy to use UI that always delivers a great editing experience. Image editing is one of the most used features that always adds a plus when compared to other editing solutions.

example07

Live example (JSfiddle)



Local Upload

Although inserting images as base64 is possible, it is recommended to use images loaded from an URL. Below you can find 2 reasons why it is not recomended to insert images as base64:

  1. Browsers tend to slow down when images are inserted as base64 because they have to process very large chunks of HTML;
  2. When you save the content, you pass a lot of data to your server and that would result in an unwanted overload.

example08

Live example (JSfiddle)

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

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1311212093" 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_1040216567" 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_1962139653" 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>