Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

rails

Rails Froala Editor

Installation

  1. Add the following to your Gemfile:

    gem "wysiwyg-rails"
      
  2. Run the following:

    bundle install.

Include in assets

  1. 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 also include themes/dark.min.css.

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

    #= 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

    # 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

    @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.

    # 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.

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1804715254" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_580214747" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_297449560" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>