ActionText: Trix
O curso acompanha o ActionText numa aplicação Rails, do armazenamento à renderização. Começa pela tabela polimórfica compartilhada action_text_rich_texts e pelo que o has_rich_text define. Depois trata do editor Trix e do seu vocabulário HTML fixo, da sanitização feita na renderização e dos anexos guardados como referências assinadas a blobs do ActiveStorage. As aulas finais estilizam rich text sob um CSS reset, trocam o Trix pelo Lexxy sem mexer no armazenamento e seguem uma nota de aula do envio do formulário de volta ao editor.
O que você vai aprender
- ✓Como o has_rich_text guarda conteúdo numa única tabela polimórfica
- ✓Como o editor Trix e o rich_text_area enviam HTML pelo formulário
- ✓Onde o ActionText sanitiza o HTML e quais tags e atributos sobrevivem
- ✓Como os anexos usam direct upload, signed global IDs e blobs do ActiveStorage
- ✓Estilo do rich text renderizado e do editor com classes CSS de escopo
- ✓Troca do Trix pelo Lexxy mantendo models, armazenamento e renderização
Rich text é um registro polimórfico
Todo model Rails que guarda texto simples o mantém numa coluna da própria tabela: uma coluna body, uma coluna description, uma por campo. O ActionText faz diferente. Ele guarda conteúdo rico numa única tabela compartilhada, chamada action_text_rich_texts, e liga cada linha ao seu dono por uma…
Ler a aula completa grátis →Currículo
7 aulasRich text é um registro polimórfico
O ActionText guarda todo campo de rich text numa tabela compartilhada, ligada ao dono por chave polimórfica.
Trix: o editor padrão
O Trix renderiza um elemento customizado que escreve um conjunto fixo de tags HTML num input escondido.
Sanitização: qual HTML sobrevive
O ActionText guarda o HTML enviado sem mudança e o sanitiza na renderização, com allow list ampliada pelo Lexxy.
Attachments: Trix encontra ActiveStorage
Os anexos sobem pelo ActiveStorage antes do envio e ficam no rich text como tags com signed global IDs.
Renderizando e estilizando rich text
O rich text renderiza com uma chamada na view e precisa de CSS com escopo para repor estilos que o reset tira.
Trocando o editor: de Trix para Lexxy
Esta aplicação usa o Lexxy no lugar do Trix, mudando JavaScript, saída do formulário e CSS do editor, sem mexer no armazenamento.
ActionText: juntando tudo
Uma nota de aula é acompanhada do editor ao controller e ao armazenamento até voltar ao editor, e os comentários mostram a etapa de renderização.