Froala Documentation
- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
- Froala Docs
- /
- Framework Plugins
- /
- Rails
Rails Froala Editor
Installation
Add the following to your Gemfile:
gem "wysiwyg-rails"
Run the following:
bundle install
.
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 also include
themes/dark.min.css
.-
In
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 include them in
application.js.coffee
andapplication.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';
If you want to use a language translation, include the translation file.
# Include Language if needed #= require languages/ro.js
-
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.
Table of Contents
hide