Usando Action Text em Rails 7

Hoje, nós vamos aprender a integrar um editor WYSIWYG com rapidez e facilidade na nossa aplicação Rails.

Observação: Será necessário instalar alguns software de terceiro para processamento de imagem.

• libvips v8.6+ e/ou ImageMagick para analise e transformação de imagem.

O que é Action Text?

Action Text nos dá a capacidade de criar conteúdo de rich text. Ele usa o editor Trix para lidar com tudo, desde a formatação a links, citações, listas, imagens incorporadas. O conteúdo rich text gerado pelo editor Trix é salvo em seu próprio model RichText associado a qualquer model Active Record existente no aplicativo. E também, quaisquer anexos incorporadas são armazenadas automaticamente usando o Active Storage e associadas ao model RichText.

Bem, chega de papo e vamos construir nossa aplicação.

Criando uma aplicação

A aplicação que vou criar é um simples blog.

rails new blog
cd blog

Agora, vamos instalar o Action Text

Instalando o Action Text

Para instalar, é bem simples, basta executar o comando abaixo.

rails action_text:install

Pronto, com isso, o Action Text está instalado.

Vamos criar o model e controller.

Eu vou usar o scaffold, para nos livrar do trabalho.

rails g scaffold Publicacao titulo conteudo:rich_text
railos db:migrate

Perceba que eu criei o conteudo do tipo rich_text, com isso, o action text está associado com o model Publicacao.

Beleza, mas se eu tiver um model criado, o que eu faço?

É bem simples, basta colocar o código has_rich_text :nome_do_atributo no seu model.

Por exemplo, vamos abrir o arquivo app/models/publicacao.rb

class Publicacao < ApplicationRecord
  has_rich_text :conteudo
end

Perceba que o generator colocou para gente, não tem muito segredo em fazer isso.

Antes de rodar o servidor, vamos observar o arquivo view, para saber como que colocar o editor no form.

Abra o arquivo app/views/publicacaos/_form.html.erb e foque em uma parte do código.

...
  <div>
    <%= form.label :conteudo, style: "display: block" %>
    <%= form.rich_text_area :conteudo %>
  </div>
...

Então, para usar o editor Trix, basta colocar o rich_text_area :nome_do_atributo.

Então, vamos ver essa coisa funcionando, rode o servidor e vá para localhost:3000/publicacaos/new.

E verá um editor WYSIWYG, então divirta-se brincando com ele, coloque imagem, use a formatação, etc.

Bem, nós acabamos por aqui.

Então é isso, tchau!