Utiliser ActionText avec Trix (WYSIWYG) dans Rails

Dans le développement d'applications web avec Ruby on Rails, la gestion du contenu riche est devenue essentielle. ActionText, introduit dans Rails 6, permet d'intégrer facilement des éditeurs de texte enrichi dans vos applications. Dans cet article, nous allons explorer comment utiliser ActionText avec Trix, un éditeur WYSIWYG (What You See Is What You Get) populaire, pour créer une expérience utilisateur fluide et intuitive.

Qu'est-ce qu'ActionText ?

ActionText est une fonctionnalité de Rails qui permet de gérer le contenu riche. Il s'intègre parfaitement avec Active Record et offre des fonctionnalités telles que le stockage de texte enrichi, la gestion des images et des fichiers, ainsi que la possibilité d'utiliser des balises HTML. ActionText utilise Trix comme éditeur par défaut, ce qui facilite la création et l'édition de contenu.

Pourquoi utiliser Trix ?

Trix est un éditeur WYSIWYG développé par Basecamp. Il est léger, facile à utiliser et offre une interface conviviale. Voici quelques raisons pour lesquelles Trix est un excellent choix pour votre application Rails :

Interface intuitive : Trix offre une interface utilisateur simple qui permet aux utilisateurs de formater leur texte sans avoir besoin de connaître le HTML.
Support des fichiers : Les utilisateurs peuvent facilement insérer des images et des fichiers dans leur contenu.
Intégration avec ActionText : Trix fonctionne de manière transparente avec ActionText, ce qui simplifie la gestion du contenu.

Configuration de votre application Rails

Pour commencer à utiliser ActionText avec Trix, vous devez d'abord configurer votre application Rails. Voici les étapes à suivre :

1. Créer une nouvelle application Rails

Si vous n'avez pas encore d'application Rails, vous pouvez en créer une en utilisant la commande suivante :

rails new mon_application --skip-javascript

Nous utilisons l'option --skip-javascript car nous allons ajouter Trix manuellement.

2. Ajouter ActionText

Pour ajouter ActionText à votre application, exécutez la commande suivante :

rails action_text:install

Cela générera les fichiers nécessaires et ajoutera les migrations pour ActionText.

3. Exécuter les migrations

Après avoir installé ActionText, exécutez les migrations pour créer les tables nécessaires dans votre base de données :

rails db:migrate

4. Ajouter Trix à votre application

Pour utiliser Trix, vous devez l'ajouter à votre application. Vous pouvez le faire en ajoutant la gem suivante à votre fichier Gemfile :

gem 'trix'

Ensuite, exécutez la commande suivante pour installer la gem :

bundle install

5. Inclure Trix dans votre application

Pour inclure Trix dans votre application, ajoutez les fichiers JavaScript et CSS de Trix dans votre fichier application.js et application.css :

// app/javascript/packs/application.js
import "trix"
import "@rails/actiontext"

// app/assets/stylesheets/application.css
@import "trix";

Créer un modèle avec ActionText

Maintenant que vous avez configuré ActionText et Trix, vous pouvez créer un modèle qui utilise ActionText pour stocker du contenu riche. Voici comment procéder :

1. Générer un modèle

Générez un modèle, par exemple Article, avec un champ pour le contenu :

rails generate model Article title:string content:text

2. Modifier le modèle

Ouvrez le fichier article.rb et ajoutez la ligne suivante pour activer ActionText :

class Article < ApplicationRecord
  has_rich_text :content
end

3. Créer le formulaire

Ensuite, créez un formulaire pour permettre aux utilisateurs de créer ou de modifier des articles. Dans votre vue new.html.erb ou edit.html.erb, ajoutez le code suivant :

<%= form_with(model: @article) do |form| %>
  <div>
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div>
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<%= end %>

Afficher le contenu riche

Une fois que vous avez créé des articles avec du contenu riche, vous devez les afficher. Dans votre vue show.html.erb, utilisez le code suivant :

<h1><%= @article.title %></h1>
<div><%= @article.content %></div>

Conclusion

En utilisant ActionText avec Trix dans votre application Rails, vous pouvez facilement gérer du contenu riche et offrir une expérience utilisateur agréable. Que ce soit pour des articles de blog, des commentaires ou d'autres types de contenu, ActionText et Trix vous permettent de créer des interfaces intuitives et puissantes.

Nous espérons que cet article vous a aidé à comprendre comment configurer et utiliser ActionText avec Trix. N'hésitez pas à explorer davantage les fonctionnalités d'ActionText et à personnaliser votre éditeur selon vos besoins. Bonne programmation !