a2m | il y a 7 ans | 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:
[pastacode lang= »ruby » manual= »gem%20%22wysiwyg-rails%22%0A%0A%23%20Vous%20avez%20besoin%20aussi%20des%20gems%0Agem%20’jquery-rails’%0Agem%20%22font-awesome-rails%22″ message= » » highlight= » » provider= »manual »/]
Faîte la commande
[pastacode lang= »bash » manual= »bundle%20install » message= » » highlight= » » provider= »manual »/]
, dans votre terminal.
Ajouter le CSS
dans votre application.css.scss, ajouter :
[pastacode lang= »css » manual= »%2F*%0A%40import%20%22froala_editor.min%22%3B%0A%40import%20%22froala_style.min%22%3B%0A%40import%20%22font-awesome-sprockets%22%3B%0A%40import%20%22font-awesome%22%3B%0A*%2F%0A%0AOU%0A%2F*%0A%20*%3D%20require%20froala_editor.min%0A%20*%3D%20require%20froala_style.min%0A%20*%3D%20require%20font-awesome%0A*%2F » message= » » highlight= » » provider= »manual »/]
Ajouter le JS
dans le fichier application.js.coffee, ajouter :
[pastacode lang= »javascript » manual= »%23%3D%20require%20froala_editor.min.js%0A%0A%2F%2F%20ajouter%20la%20langue%20fr%0A%23%3D%20require%20languages%2Ffr.js%0A%0A%24(‘selector’).froalaEditor()%3B » message= » » highlight= » » provider= »manual »/]
vous pouvez ajouter un tas de plugins
https://www.froala.com/wysiwyg-editor/docs/plugins
Dans votre fichier .html.erb, exemple pour un textarea
[pastacode lang= »javascript » manual= »%3Cscript%3E%20%24(function()%20%7B%20%24(‘textarea’).froalaEditor(%0A%7B%0AheightMin%3A%20’200px’%2C%0Alanguage%3A%20’fr’%2C%0A%0A%20%20%20%20toolbarButtons%3A%20%5B’bold’%2C%20’italic’%2C%20’underline’%2C’paragraphFormat’%2C’align’%2C%20’formatOL’%2C%20’formatUL’%2C%20’outdent’%2C%20’indent’%2C%20’insertLink’%2C%20’html’%2C%20’insertImage’%5D%2C%0A%7D%0A)%20%7D)%3B%20%3C%2Fscript%3E%0A » message= » » highlight= » » provider= »manual »/]
Pour afficher le html, dans votre show.html.erb
[pastacode lang= »ruby » manual= »%3C%25%3D%20simple_format(%40user.votrechamp%2C%20%7B%7D%2C%20sanitize%3A%20false)%25%3E » message= » » highlight= » » provider= »manual »/]
https://ruby.machinmachine.fr/2018/ajouter-un-editeur-wysiwyg-dans-rails/