
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
wysiwyg-rails provides the Froala WYSIWYG HTML Editor javascript and stylesheets as a Rails engine for use with the asset pipeline.
Add this to your Gemfile:
gem "wysiwyg-rails"
and run bundle install
.
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', {
})
You can pass options to editor by including these in index.html.erb
new FroalaEditor('#editor', {
options : value
});
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.
Details about initializing the editor can be found in the Froala WYSIWYG Editor official documentation.
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.
FAQs
Unknown package
We found that wysiwyg-rails demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.