Usando ActionText con Trix (WYSIWYG) en Rails

En el mundo del desarrollo web, la edición de contenido es una parte fundamental de la experiencia del usuario. Ruby on Rails, uno de los frameworks más populares para construir aplicaciones web, ha integrado una herramienta poderosa llamada ActionText, que permite a los desarrolladores manejar contenido enriquecido de manera sencilla. En este artículo, exploraremos cómo usar ActionText junto con Trix, un editor WYSIWYG (What You See Is What You Get), para crear una experiencia de edición de texto fluida y efectiva en nuestras aplicaciones Rails.

¿Qué es ActionText?

ActionText es una parte de Rails que permite a los desarrolladores manejar texto enriquecido. Introducido en Rails 6, ActionText facilita la creación, edición y almacenamiento de contenido que incluye texto, imágenes y otros elementos multimedia. Esto es especialmente útil para aplicaciones que requieren un sistema de gestión de contenido (CMS) o donde los usuarios necesitan crear publicaciones, comentarios o cualquier tipo de contenido que no sea solo texto plano.

¿Qué es Trix?

Trix es un editor WYSIWYG desarrollado por Basecamp, diseñado para ser simple y fácil de usar. Permite a los usuarios formatear texto, insertar imágenes y crear listas, todo desde una interfaz intuitiva. Trix se integra perfectamente con ActionText, lo que lo convierte en una opción ideal para aplicaciones Rails que necesitan capacidades de edición de texto enriquecido.

Configurando ActionText y Trix en tu aplicación Rails

Para comenzar a usar ActionText y Trix en tu aplicación Rails, sigue estos pasos:

1. Crear una nueva aplicación Rails

Si aún no tienes una aplicación Rails, puedes crear una nueva ejecutando el siguiente comando en tu terminal:

rails new mi_aplicacion

2. Agregar ActionText a tu aplicación

Para agregar ActionText, ejecuta el siguiente comando:

rails action_text:install

Esto generará los archivos necesarios y migraciones para ActionText. Luego, ejecuta las migraciones:

rails db:migrate

3. Agregar Trix a tu aplicación

Para usar Trix, primero necesitas agregarlo a tu Gemfile. Abre el archivo Gemfile y agrega la siguiente línea:

gem 'trix'

Luego, ejecuta el siguiente comando para instalar la gema:

bundle install

4. Incluir Trix en tus archivos JavaScript y CSS

Ahora, necesitas incluir Trix en tus archivos JavaScript y CSS. Abre el archivo app/javascript/packs/application.js y agrega lo siguiente:

import "trix"
import "@rails/actiontext"

Luego, en tu archivo CSS, asegúrate de incluir Trix. Abre app/assets/stylesheets/application.scss y agrega:

@import "trix";

5. Crear un modelo que use ActionText

Ahora que tienes ActionText y Trix configurados, es hora de crear un modelo que use ActionText. Por ejemplo, si estás creando un blog, puedes crear un modelo llamado Post:

rails generate model Post title:string content:text

Luego, abre el archivo de migración generado y agrega el siguiente código para habilitar ActionText:

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :content

      t.timestamps
    end

    # Agregar soporte para ActionText
    add_timestamps :posts, default: -> { 'CURRENT_TIMESTAMP' }, null: false
  end
end

Ejecuta la migración:

rails db:migrate

6. Configurar el controlador y las vistas

Ahora, crea un controlador para manejar los posts:

rails generate controller Posts

En el controlador PostsController, agrega las acciones necesarias:

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to @post
    else
      render :new
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

Ahora, crea las vistas para el formulario de creación de posts. En app/views/posts/new.html.erb, agrega el siguiente código:

<%= form_with model: @post do |form| %>
  
    <%= form.label :title %>
    <%= form.text_field :title %>
  

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

  
    <%= form.submit "Crear Post" %>
  
<% end %>

Probando tu aplicación

Ahora que has configurado ActionText y Trix, es hora de probar tu aplicación. Inicia el servidor Rails:

rails server

Visita http://localhost:3000/posts/new en tu navegador. Deberías ver un formulario donde puedes ingresar un título y contenido para tu post. Usa el editor Trix para formatear tu texto, agregar imágenes y más.

Almacenando y mostrando contenido enriquecido

Una vez que hayas creado un post, querrás mostrarlo en tu aplicación. Crea una vista para mostrar el post en app/views/posts/show.html.erb:

<%= @post.title %>

  <%= @post.content %>

Ahora, agrega la acción show en tu controlador:

def show
  @post = Post.find(params[:id])
end

Conclusión

En este artículo, hemos explorado cómo usar ActionText junto con Trix en una aplicación Rails. Desde la configuración inicial hasta la creación y visualización de contenido enriquecido, hemos cubierto los pasos necesarios para implementar esta poderosa funcionalidad en tu aplicación. ActionText y Trix no solo mejoran la experiencia del usuario, sino que también simplifican el proceso de gestión de contenido para los desarrolladores.

Ahora que tienes una comprensión básica de cómo usar ActionText y Trix, ¡es hora de experimentar y crear contenido enriquecido en tu propia aplicación Rails! No dudes en explorar más características y personalizaciones que estas herramientas ofrecen para llevar tu aplicación al siguiente nivel.