Froala Editor 3 is here!

Migrate from TinyMCE

Feature Matching

The following guide explains how to achieve most popular features from TinyMCE in Froala Editor. For each of them, we put together 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 WYSIWYG HTML Editor comes with inline toolbar which makes it easy to edit inline without any external distractions.

example02

Live example (JSfiddle)




Inline Editor

Inline editing is one of the most appreciated features in Froala Rich Text 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

Although the Froala Editor comes with a lot of built-in features, many times - just like in TinyMCE - we need to create new buttons in the toolbar. This example highlights how to add a new button which 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 deliver a great editing experience without cutting corners. The image editing is one of the most used and loved features which always adds a plus when compared to other editing solutions.

example07

Live example (JSfiddle)



Local Upload

Although inserting images as base64 can be easily achieved, our recommendation is to use images that are loaded from an URL. This might be tempting at a first glance because you don't have to deal with all the image storage, but you will get in troubles quickly. Here are the top 2 reasons for doing that when you're using a WYSIWYG HTML editor:
 1. browser 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'll pass a lot of data to your server and that would result in an unwanted overload.

example08

Live example (JSfiddle)

Top