Froala WYSIWYG Editor

Froala Editor is a lightweight WYSIWYG rich text editor with a nice flat design. It is the first WYSIWYG editor with image resize that works even on mobile devices.
The editor covers a lot of functionalities through the default buttons, but we may sometimes need to add in another behaviour. The goal of this tutorial is to add two custom buttons: a button to clear all the HTML in the editable area and one to insert a specific HTML next to the cursor.

Froala WYSIWYG Editor is an easy to include and easy to use plugin. It requires jQuery 1.10.2 or higher and the iconic font named Font Awesome. So the following lines are all you need in order to use this plugin on your website:

At this point we can write and edit anything we want inside the editable area. A popup with the default editing options will appear as you type or when you select the text you want to edit (customizable through ‘alwaysVisible’ option). This is called inline editing. We can also use a basic editor that always keeps a toolbar at the top. To do this just disable inline mode when you initialize the editor:

The buttons can be easily customized by choosing which of them appear in the editor, changing the way they are grouped or even create our own buttons. This can be done by using the ‘customButtons’ and ‘buttons’ options. The ‘customButtons’ option is a JSON that defines the new buttons. This is how a button definition should look like:

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more