Rails Froala Editor

Installation

1. Add the following to your Gemfile:

   Copy

   gem "wysiwyg-rails"
     

2. Run the following:

   Copy

   bundle install.

Include in assets

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

   Copy

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

   If you want to use the dark theme also include themes/dark.min.css.

2. In application.js.coffee, include the JS file:

   Copy

   #= require froala_editor.min.js
     
     new FroalaEditor('selector',{
     
     });
     

3. If you need to use any of the Available Plugins include them in application.js.coffee and application.css.scss.

   On application.js.coffee

   Copy

   # 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
     

   On application.css.scss

   Copy

   @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';
     

4. If you want to use a language translation, include the translation file.

   Copy

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

5. Restart the web server.

Initialize Editor

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

Additional Resources

• 6 Server Side Frameworks With Easy WYSIWYG Editor Integration
• Using Froala as a Vue Visual HTML Editor for Markdown: A Guide