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í:

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:
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
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.
0 Comentarios
Dejanos tu comentario para seguir mejorando!