Froala Editor v4.2.0 is Here LEARN MORE
It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
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.
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.
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.
Custom Formats
In Froala, you can use Custom Formats with three functions Inline Classes, Inline Styles, and Paragraph Styles.
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.
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.
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.
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.
