Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/froala/wysiwyg-rails
Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.
https://github.com/froala/wysiwyg-rails
Last synced: 3 days ago
JSON representation
Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.
- Host: GitHub
- URL: https://github.com/froala/wysiwyg-rails
- Owner: froala
- License: mit
- Created: 2014-02-04T19:25:40.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T08:07:37.000Z (about 1 month ago)
- Last Synced: 2024-10-30T06:31:30.584Z (9 days ago)
- Language: CSS
- Homepage: https://froala.com/wysiwyg-editor
- Size: 14.1 MB
- Stars: 464
- Watchers: 18
- Forks: 102
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wysiwyg - wysiwyg-rails - Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor. (For Ruby)
- awesome-wysiwyg-editors - wysiwyg-rails - Free` - 用于 Froala jQuery WYSIWYG HTML 富文本编辑器的 Ruby gem。  (基于 Ruby)
README
# Rails Froala WYSIWYG HTML Editor
[](http://travis-ci.org/froala/wysiwyg-rails)
[](https://rubygems.org/gems/wysiwyg-rails/versions/2.1.0)
[](https://rubygems.org/gems/wysiwyg-rails/versions/2.1.0)
[](https://rubygems.org/gems/wysiwyg-rails/versions/2.1.0)
>wysiwyg-rails provides the [Froala WYSIWYG HTML Editor](https://froala.com/wysiwyg-editor) javascript and stylesheets as a Rails engine for use with the asset pipeline.
## Installation
Add this to your Gemfile:
```ruby
gem "wysiwyg-rails"
```
and run `bundle install`.
## Usage
In your index.html.erb add
```
```
To use third-party plugins add
```
```
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:
```css
/*
@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:
```coffeescript
#= require froala_editor.min.js
new FroalaEditor('selector',{
});
```
If you need to use any of the [Available Plugins](https://froala.com/wysiwyg-editor/docs/plugins), then you should include those too in your `application.js.coffee` and `application.css.scss`.
```coffeescript
# 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
```
```css
@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.
```coffeescript
# 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](https://www.froala.com/wysiwyg-editor/docs).
## 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](https://froala.com/wysiwyg-editor/pricing).
For details please see [License Agreement](https://froala.com/wysiwyg-editor/terms).