Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.
JavaScript Ruby
Latest commit 6ed96a4 Dec 9, 2016 @stefanneculai stefanneculai Update to V2.4.0.
Failed to load latest commit information.
app/assets Update to V2.4.0. Dec 9, 2016
gemfiles Rails 5 bump Jul 12, 2016
lib Update to V2.4.0. Dec 9, 2016
.gitignore Update gitignore. Oct 23, 2014
.travis.yml Rails 5 bump Jul 12, 2016
Gemfile Update gemspec and Gemfile. Feb 4, 2014
LICENSE Update to 2.0.2. Dec 7, 2015 Update to V2.4.0. Dec 9, 2016
Rakefile Fix Rakefile. Feb 4, 2014
wysiwyg-rails.gemspec Rails 5 bump Jul 12, 2016

Rails Froala WYSIWYG HTML Editor Gem Version Build Status

wysiwyg-rails provides the Froala WYSIWYG HTML Editor javascript and stylesheets as a Rails engine for use with the asset pipeline.


Add this to your Gemfile:

gem "wysiwyg-rails"

and run bundle install.

Include in assets

In your application.css, include the css file:

 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome

If you want to use the dark theme, then you have to include themes/dark.min.css file too.

In your application.js, include the JS file:

//= require froala_editor.min.js

If you need to use any of the Available Plugins, then you should include those too in your application.js and application.css.

// Include other plugins.
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/help.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
 *= require plugins/char_counter.min.css
 *= require plugins/code_view.min.css
 *= require plugins/colors.min.css
 *= require plugins/emoticons.min.css
 *= require plugins/file.min.css
 *= require plugins/fullscreen.min.css
 *= require plugins/help.min.css
 *= require plugins/image_manager.min.css
 *= require plugins/image.min.css
 *= require plugins/line_breaker.min.css
 *= require plugins/quick_insert.min.css
 *= require plugins/table.min.css
 *= require plugins/video.min.css

Similar, if you want to use language translation you have to include the translation file.

// Include Language if needed
//= require languages/ro.js

Then restart your web server if it was previously running.

Initialize Editor

Details about initializing the editor can be found in the Froala WYSIWYG Editor official documentation.


The wysiwyg-rails project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

Froala Editor has 3 different licenses. For details please see License Agreement.