Skip to content

Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.

License

Notifications You must be signed in to change notification settings

froala/wysiwyg-rails-1

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 99.8%
  • Ruby 0.2%