Cómo usar Action Text en Rails 6

 

Texto de acción

Instalación

Correr:

rails action_text: instalar

El comando añadirá la bobina de hilo y añadir archivos necesarios como:
  - bobina de hilo: paquetes agregado para actiontext y trix a package.json
  - CSS: app / activos / hojas de estilo / actiontext.scss - Agregar este archivo CSS para la aplicación superior. scss 

# app / assets / stylesheets / application.scss
// = requiere actiontext

  - JS:

• Agregar trix a app / javascript / packs / application.js
• Agregar @ rails / actiontext a app / javascript / packs / application.js

# app / javascript / packs / application.js
[...]
require ("trix")
require ("@ rails / actiontext")

  - Migración: crea una nueva migración para almacenar contenido de edición

db / migrate / 20200905150522_create_action_text_tables.action_text.rb

  - Ver: crea una vista de blob para mostrar archivos adjuntos

app / views / active_storage / blobs / _blob.html.erb

Ejecute la migración para crear action_text_tables:

rails db: migrar

Usando Action Text para editar el contenido de la publicación:
En el modelo de publicación, agregue has_rich_text   para el   campo de contenido que queremos editar:

clase Publicar <ApplicationRecord
  has_rich_text: contenido
fin

En Form, usando el ayudante rich_text_area para editar contenido:

<% = formulario. rich_text_area : contenido , clase: 'control de formulario'%>

Vuelva a cargar la página de edición de publicaciones y vea el editor así:

Editor enriquecido por texto de acción

Intente editar texto o cargar imágenes en el contenido, ¡y vea cómo funciona!

Subir imágenes en texto de acción

En el texto de acción, las imágenes se almacenan automáticamente usando Active Storage y se asocian con el modelo RichText incluido.

Debido a que Action Text utiliza cargas directas , tenemos que configurar el servicio (Amazon S3) para permitir solicitudes de origen cruzado (uso compartido de recursos de origen cruzado) desde nuestra aplicación Blog.

Ejemplo de configuración de S3 CORS:

<? xml version = "1.0" encoding = "UTF-8"?>
<CORSConfiguration xmlns = "http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin> https://example.com </AllowedOrigin>
    <AllowedMethod> PUT </AllowedMethod>
    <AllowedMethod> PUBLICAR </AllowedMethod>
    <MaxAgeSeconds> 3600 </MaxAgeSeconds>
    <AllowedHeader> * </AllowedHeader>
</CORSRule>
</CORSConfiguration>

Comprensión profunda del texto de acción

Obtenga una publicación que ya haya agregado contenido con imágenes cargadas para probar en la consola:

ActionText :: RichText

post.content 
=> # < ActionText :: RichText id: 53, nombre: "contenido",
body: # <ActionText :: Content "<div class = \" trix-conte ... ">, 
record_type: "Publicar", 
record_id: 22, 
created_at: "2020-09-13 08:02:37", 
updated_at: "2020-09-20 07:25:32">

Puede ver que devuelve un objeto ActionText :: RichText . El registro RichText contiene el contenido y los archivos adjuntos que se almacenan con Active Storage.

Podemos obtener archivos adjuntos a través del objeto RichText mediante:

post.content.embeds
=> # <ActiveStorage :: Attached :: Many: 0x00007f8411eed490 @ name = "embeds", 
@record = # <ActionText :: RichText id: 53, nombre: "contenido", 
body: # <ActionText :: Content "<div class = \" trix-conte ... ">, 
record_type: "Publicar", record_id: 22, 
created_at: "2020-09-13 08:02:37", updated_at: "2020-09-20 07:25:32" >>

ActionText :: Contenido

post.content.body
# => # <ActionText :: Content "<div class = \" trix-conte ... ">

Devuelve un objeto ActionText :: Content . En allí, se puede obtener archivos de lista de archivos adjuntos por:

post.content.body.attachments
 # => Lista ActionText :: Attachment

Además, puede obtener todos los enlaces en el contenido mediante:

post.content.body.links
 # => [
"https://fullstackrubyonrails.com", 
"https://fullstackrubyonrails.com/about"
]

Texto de acción de carga ansiosa

• Evita consultas N + 1 cuando desea el cuerpo, no los archivos adjuntos.

Post.all.with_rich_text_content

• Evita consultas N + 1 cuando desea el cuerpo y los archivos adjuntos.

Post.all.with_rich_text_content_and_embeds 

Conclusión

En este artículo, te guío sobre cómo usar Action Text para agregar un editor de texto enriquecido en la aplicación Rails. En el próximo artículo , voy a compartir sobre cómo agregar funciones de autenticación usando Devise gem en la aplicación Rails.