Un vistazo rápido al texto de acción para Rails 6.0

Rails 6.0 ya casi está aquí. La versión estable se lanzará el 30 de abril. Rails 6.0 beta1 se lanzó el 15 de enero. Como siempre lo son las versiones de Rails, Rails 6.0 también está lleno de acción. Hay dos marcos principales recientemente introducidos, Action Mailbox y Action Text. En esta publicación, echemos un vistazo rápido a Action Text usándolo en una pequeña aplicación.

Texto de acción

Action Text nos permite traer contenido de texto enriquecido y edición a Rails. Esto significa que podemos realizar operaciones como formatear texto, incrustar imágenes, formatear enlaces, agregar listas y otras funciones similares a las de un editor en un campo de texto.

Esto se hace al incluir el editor Trix en el marco. El contenido de RichText generado por el editor Trix se guarda en su propio modelo RichText que está asociado con cualquier modelo de Active Record existente en la aplicación. Todas las imágenes incrustadas u otros archivos adjuntos se almacenan automáticamente mediante Active Storage.

Comencemos a construir nuestra aplicación Rails, que será una aplicación de blogger. La aplicación se crea en Rails 6.0, por lo que la versión ruby ​​debe ser> 2.5.

En el tipo de terminal

rails new blog --edge

La bandera de borde obtiene la última versión de rieles o versión de borde de los rieles.

Action Text espera que se instalen Web Packer y ActiveStorage. El almacenamiento activo ya está presente en la aplicación Rails. Así que necesitamos

gem “image_processing”, “~> 1.2” #uncomment from Gemfilegem ‘webpacker’

en el archivo de gemas.

Ahora corre

bundle install.

A continuación, necesitamos crear un config / webpacker.yml:

bundle exec rails webpacker:install

Ahora iniciemos nuestro servidor Rails.

Genial, creemos rápidamente nuestra aplicación. La aplicación solo tendrá un artículo modelo.

Creemos un controlador para artículos:

rails g controller Articles index new create show edit update destroy — no-helper — no-test-frameworks

Y luego configura nuestras rutas:

Rails.application.routes.draw do resources :articlesend

A continuación, necesitamos crear nuestro modelo. Nuestro modelo de Artículos tendrá dos campos: son título y texto . El texto debe ser el campo que acepta el formato de texto enriquecido. Entonces, en la migración, necesitamos agregar solo el campo de título. El campo de texto será manejado por ActionText.

Generemos el modelo

rails g model Articles title:string — no-test-framework

y ejecuta las migraciones:

rails db:migrate

Ahora agreguemos la parte ActionText. Para esa primera carrera

rails action_text:install

Esto agregará todas las dependencias requeridas por Action Text. En particular, esto agregará un nuevo archivo javascript / packs / application.js y dos migraciones de almacenamiento de acción.

Ejecute las migraciones nuevamente usando

rails db:migrate

Ahora podemos agregar la parte de texto de nuestro modelo. Vaya a app / models / article.rb y agregue la siguiente línea

has_rich_text :text

texto es el nombre del campo que proporcionamos. Puede ser cualquier cosa como cuerpo o contenido, etc.

Ahora nuestro modelo se convierte en

class Article < ApplicationRecord has_rich_text :textend

Antes de construir nuestro formulario, creemos nuestra lógica de controlador para la creación de artículos:

class ArticlesController < ApplicationController def create @article = Article.new(article_params) @article.save redirect_to @article end
 private def article_params params.require(:article).permit(:title, :text) end
end

Ahora podemos crear el formulario para el blog. En app / views / articles / new.rb agregue el siguiente código de formulario:

Observe que para el campo de texto estamos usando form.rich_text_area quees proporcionado por Action Text.

Rendericemos nuestra página:

¡¡Increíble!!

Ahora tenemos un editor de texto increíble para crear nuestro artículo.

Antes de empezar a jugar con el editor, implementemos rápidamente la funcionalidad de mostrar del blog, para que podamos ver los artículos que hemos creado.

En app / controllers / articles_controller.rb agregue la siguiente función:

 def show @article = Article.find(params[:id]) end

Además, necesitamos crear una vista para esto.

Cree el archivo app / views / articles / show.html.erb y agregue el siguiente código:

Article Title:

Article Text:

Eso es. Nuestra aplicación está lista. Ahora, revisemos las diversas funciones disponibles en el editor de texto proporcionado por ActionText.

Podemos ver que ActionText proporciona casi todas las funcionalidades de un editor de texto enriquecido normal, como formatear el texto en negrita, cursiva, agregar tachados, comillas, enlaces, arrastrar y soltar imágenes, etc.

Después de guardar esto, podemos ver la publicación guardada en la página del programa.

¡Excelente!

Este es un ejemplo muy pequeño que muestra el potencial de ActionText. Espero que haya sido de ayuda. Pruébalo.

La gran mayoría de las aplicaciones web se ocupan de contenido enriquecido de alguna manera. Por eso creo que esta nueva característica de Rails puede facilitar la vida de muchos desarrolladores.

Felicitaciones a DHH y a todas las personas increíbles detrás de esto.

//github.com/amkurian/Rails-6.0_action_text_demo

Algunos enlaces útiles:

Descripción general del texto de acción: guías de Ruby on Rails

Descripción general del texto de acción Esta guía le proporciona todo lo que necesita para comenzar a manejar contenido de texto enriquecido. Después de edgeguides.rubyonrails.org