0.31
A long-lived project that still receives updates
A beautiful WYSIWYG HTML text editor. High performance and modern design make it easy to use for developers and loved by users.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

>= 3.2.7, < 8.0
 Project Readme

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.

Usage

In your index.html.erb add

<script type="text/javascript" src = "../../assets/froala_editor.pkgd.min.js"></script>

To use third-party plugins add

<script type="text/javascript" src = "../../assets/third_party/font_awesome.min.js"></script>
<script type="text/javascript" src = "../../assets/third_party/embedly.min.js"></script>
<script type="text/javascript" src = "../../assets/third_party/image_tui.min.js"></script>
<script type="text/javascript" src = "../../assets/third_party/spell_checker.min.js"</script>

Initialize editor by adding below in body of index.html.erb

 new FroalaEditor('#edit', {
   
  })

Options

You can pass options to editor by including these in index.html.erb

new FroalaEditor('#editor', {
options :  value
});

Include in assets

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

/*
 @import "froala_editor.min";
 @import "froala_style.min";
 */

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

new FroalaEditor('selector',{
  
});

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_class.min.js
#= require plugins/inline_style.min.js
#= require plugins/line_breaker.min.js
#= require plugins/line_height.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/font_awesome.min.js
#= require third_party/image_tui.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/image_tui.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.