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!
Top comments (0)