Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.
JavaScript CSS Ruby
Clone or download
Latest commit c83dd75 Jun 24, 2018

README.md

Rails Froala WYSIWYG HTML Editor

Travis Gem Gem license

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

Installation

Add this to your Gemfile:

gem "wysiwyg-rails"

and run bundle install.

Include in assets

In your application.css.scss, include the css file:

/*
 @import "froala_editor.min";
 @import "froala_style.min";
 @import "font-awesome-sprockets";
 @import "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.coffee, include the JS file:

#= require froala_editor.min.js

$('selector').froalaEditor();

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

# 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/print.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/special_characters.min.js
#= require plugins/url.min.js
#= require plugins/video.min.js

#= require third_party/embedly.min.js
#= require third_party/image_aviary.min.js
#= require third_party/spell_checker.min.js
@import 'plugins/char_counter.min.css';
@import 'plugins/code_view.min.css';
@import 'plugins/colors.min.css';
@import 'plugins/emoticons.min.css';
@import 'plugins/file.min.css';
@import 'plugins/fullscreen.min.css';
@import 'plugins/help.min.css';
@import 'plugins/image_manager.min.css';
@import 'plugins/image.min.css';
@import 'plugins/line_breaker.min.css';
@import 'plugins/quick_insert.min.css';
@import 'plugins/special_characters.min.css';
@import 'plugins/table.min.css';
@import 'plugins/video.min.css';

@import 'third_party/embedly.min.css';
@import 'third_party/spell_checker.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.

License

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.