Ruby On RailsGems

Ajouter un éditeur wysiwyg dans Ruby On Rails

a2m | il y a 3 ans | en discuter | ruby.machinmachine.fr

Nous allons utiliser ici Frola
Page de la Gem sur rubygems.org : https://rubygems.org/gems/wysiwyg-rails

Frola est un bel éditeur de texte jQuery WYSIWYG HTML.
La haute performance et un design moderne le rendent facile à utiliser pour les développeurs et adoré par les utilisateurs.

Installation

Ajouter dans votre Gemfile:

gem "wysiwyg-rails"

# Vous avez besoin aussi des gems
gem 'jquery-rails'
gem "font-awesome-rails"

Faîte la commande

bundle install

, dans votre terminal.

Ajouter le CSS

dans votre application.css.scss, ajouter :

/*
@import "froala_editor.min";
@import "froala_style.min";
@import "font-awesome-sprockets";
@import "font-awesome";
*/

OU
/*
 *= require froala_editor.min
 *= require froala_style.min
 *= require font-awesome
*/

Ajouter le JS

dans le fichier application.js.coffee, ajouter :

#= require froala_editor.min.js

// ajouter la langue fr
#= require languages/fr.js

$('selector').froalaEditor();

vous pouvez ajouter un tas de plugins
https://www.froala.com/wysiwyg-editor/docs/plugins

Dans votre fichier .html.erb, exemple pour un textarea

<script> $(function() { $('textarea').froalaEditor(
{
heightMin: '200px',
language: 'fr',

    toolbarButtons: ['bold', 'italic', 'underline','paragraphFormat','align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'html', 'insertImage'],
}
) }); </script>

Pour afficher le html, dans votre show.html.erb

<%= simple_format(@user.votrechamp, {}, sanitize: false)%>
https://ruby.machinmachine.fr/2018/ajouter-un-editeur-wysiwyg-dans-rails/

Commentaires