Froala Editor
![]() | |
Froala Editor Inline Mode | |
Developer(s) | Froala Labs |
---|---|
Stable release | |
Development status | Active |
Written in | JavaScript |
Operating system | Cross-platform |
Type | HTML editor, text editor, WYSIWYG editor, Online rich-text editor |
License | Custom Licenses[1] |
Website |
www |
Froala (officially pronounced as /froʊˈɑːlə/) Editor is a web-based WYSIWYG rich text editor (RTE). It is a platform-independent, web-based JavaScript/HTML WYSIWYG text editor made by Froala. Froala Editor is available under 4 licenses: Single Website License, Developer License, Business License and OEM License.
Froala editor's core code is written in JavaScript and therefore can be integrated with any HTML document. For ease of use it has connectors with some of the most popular development frameworks:
- CakePHP [2]
- Joomla [3]
- Symfony [4]
- Yii [5]
- Django (web framework) [6]
- Ruby on Rails [7]
- AngularJS [8]
- Meteor (web framework) [9][10]
Browser support
Froala Rich Text Editor is constantly tested in all the supported browsers via unit tests. However, there might be small differences from one browser to another according to the browser-specific behaviors. Testing is essential to fully support a browser. Only the last version of the WYSIWYG HTML editor is tested and updated to fix bugs and add features. Users of older versions that find a bug should upgrade to the latest released version to determine if the bug has already been fixed.
Active support
Froala editor supports all major web browsers. Any issue in the browsers listed below should be reported as a bug.
- Internet Explorer 9+
- Safari 5.1+
- Firefox (Current - 1) and Current versions
- Chrome (Current - 1) and Current versions
- Opera (Current - 1) and Current versions
- iOS 6.0+
- Android 4.0+
(Current - 1) and Current means that the editor supports the current stable version of the browser and the version that precedes it. Starting with Froala WYSIWYG Editor version 1.2.6 we dropped the limited support for IE 8. Some of the rich text editor's features cannot be implemented in earlier versions of IE than 9. Fallback to textarea in IE 8 is expected for version 1.2.7.
Unsupported Browsers
Froala WYSIWYG Editor does not have support for pre-release versions of browsers, such as beta or dev release. If you find a bug in a pre-release of a browser, you should probably report it to the browser vendor. However, the editor may run without any major issues in older browser versions, we are not testing the rich text editor in them and we usually do not fix bugs that may appear in them.
Usage
Froala WYSIWYG HTML Editor is easy to integrate and use. There are several reasons for this:
- the Get Started tutorial helps you to start using the editor immediately after downloading it
- a rich documentation
- lots of examples where you may find exactly what you need
- multiple concept articles explaining the workflow of different actions
- server integration examples that help you integrate the editor with your server-side programming language
Plugins
Using a modular programming structure based on plugins, offers Froala WYSIWYG HTML Editor improved performance, making it more efficient, easier to understand, extend, modify and maintain. The main advantage is that you can include only the plugins that you need, instead of having all of them already in. Plugins [11] extend the basic functionality of the rich text editor. To add a plugin, just include its corresponding javascript file. For example, you can use the table plugin by adding the following line between the HTML <head></head> tags. There are numerous of plugins, but you can create your own plugins as well following the create plugin article.
- Block Style (/plugins/block_styles.min.js)
- - define custom styles for text blocks.
- Background & Text Colors (/plugins/colors.min.js)
- - adds in the possibility to change the background and text colors.
- Char Counter (/plugins/char_counter.min.js)
- - limits the number of characters that can be inserted in the editor.
- File Upload (/plugins/file_upload.min.js)
- - upload any kind of files and special links will be inserted in the editor to download them.
- Font Family (/plugins/fonts/font_family.min.js)
- - allows users to select from different font types.
- Font Size (/plugins/fonts/font_size.min.js)
- - allows users to change the font size with pixel precision.
- Fullscreen (/plugins/fullscreen.min.js)
- - add fullscreen option.
- Lists (/plugins/lists.min.js)
- - adds in the lists buttons for inserting simple lists or nested lists.
- Inline Styles (/plugins/inline_styles.min.js)
- - define custom styles for selected text.
- Media Manager (/plugins/media_manager.min.js)
- - browse through and delete images on your server.
- Tables (/plugins/tables.min.js)
- - basic and advanced operations on cells, rows and columns.
- URLS (/plugins/urls.min.js)
- - text is converted to URL as you type.
- Video (/plugins/video.min.js)
- - easily insert videos by URL or by embedded code.
Customisations
Froala WYSIWYG HTML Editor is the first editor of its kind that introduced a customising tool which you can use to create your very own version of the editor. When you're done customising, just download the newly created theme and use it following the Color Themes example.
Languages
The Froala Rich Text Editor's default language is English (United States), but it can easily be changed by choosing between the 34 supported languages: Arabic (ar), Bosnian (bs), Czech (cs), Danish (da), German (de, )English Canada (en_ca), English United Kingdom (en_gb), English United States (en_us), Spanish (es), Persian (fa), Finnish (fi), French (fr), Hebrew (he), Croatian (hr), Hungarian (hu), Indonesian (id), Italian (it), Japanese (ja), Korean (ko), Montenegrin (me), Norwegian (nb), Dutch (nl), Polish (pl), Portuguese Brazil (pt_br), Portuguese Portugal (pt_pt), Romanian (ro), Russian (ru), Serbian (sr), Swedish (sv), Thai (th), Turkish (tr), Ukrainian (uk), Chinese China (zh_cn), Chinese Taiwan (zh_tw).
References
External links
![]() |
Wikimedia Commons has media related to Froala Editor. |
- Froala Editor Website
- Froala Editor Github Repository
- Softpedia Website
- ASP.NET Froala Editor Example
- jQueryrain Website
- jQuery Script Froala Editor Basic Demo
- Froala WYSIWYG Editor Review
- Froala WYSIWYG Editor Inline Demo
- Froala Editor Custom Buttons Tutorial
- Best WYSIWYG Editors for Bootstrap