{"id":1578,"date":"2026-09-22T15:04:58","date_gmt":"2026-09-22T18:04:58","guid":{"rendered":"https:\/\/acsiv.com.br\/blog\/?p=1578"},"modified":"2026-09-22T15:37:14","modified_gmt":"2026-09-22T18:37:14","slug":"implementando-suporte-a-tabelas-no-trix-editor","status":"publish","type":"post","link":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/","title":{"rendered":"Implementando suporte a tabelas no Trix Editor"},"content":{"rendered":"\n

No artigo anterior, explorei algumas formas de personalizar o Trix Editor<\/a>, desde pequenas altera\u00e7\u00f5es na barra de ferramentas at\u00e9 a cria\u00e7\u00e3o de novos comportamentos. Agora, quero focar em um desafio espec\u00edfico \u2014 e bastante comum: adicionar suporte a tabelas.<\/p>\n\n\n\n

Os criadores do Trix, a 37signals, sempre deixaram clara sua filosofia. O editor existe para atender \u00e0s necessidades do Basecamp, e n\u00e3o h\u00e1 inten\u00e7\u00e3o de transform\u00e1-lo em um editor gen\u00e9rico e cheio de funcionalidades extras. Ainda assim, o projeto foi pensado de forma extens\u00edvel, permitindo que desenvolvedores adaptem o editor \u00e0s suas pr\u00f3prias necessidades.<\/p>\n\n\n\n

O suporte a tabelas \u00e9 justamente um desses recursos que n\u00e3o fazem parte dos planos oficiais do projeto. Em um coment\u00e1rio no reposit\u00f3rio do Trix, um dos mantenedores deixa claro:
\"\"<\/p>\n\n\n\n

A rea\u00e7\u00e3o da comunidade \u2014 vis\u00edvel pelos in\u00fameros thumbs down \u2014 mostra que essa decis\u00e3o n\u00e3o agrada a todos.
<\/p>\n\n\n\n

Apesar de tabelas n\u00e3o serem essenciais em todos os contextos, para muitos projetos elas s\u00e3o um requisito b\u00e1sico. Na pr\u00e1tica, essa limita\u00e7\u00e3o faz com que diversos desenvolvedores descartem o Trix logo de in\u00edcio. Esse quase foi o nosso caso. Chegamos a avaliar outros editores, mas a excelente integra\u00e7\u00e3o do Trix com o ecossistema Rails nos fez insistir um pouco mais. E foi a\u00ed que descobrimos algo interessante: outros desenvolvedores j\u00e1 haviam enfrentado esse problema e encontrado solu\u00e7\u00f5es pr\u00f3prias.
<\/p>\n\n\n\n

A partir desses exemplos, come\u00e7amos a explorar o problema por conta pr\u00f3pria, estudando abordagens existentes, testando ideias e entendendo melhor os limites e as possibilidades do Trix. Esse processo inicial foi fundamental para ganhar familiaridade com a arquitetura do editor e identificar onde seria poss\u00edvel estender seu comportamento.
<\/p>\n\n\n\n

Em alguns pontos, por\u00e9m, essa explora\u00e7\u00e3o esbarrou em detalhes mais sutis do
funcionamento interno do Trix. Foi nesse momento que uma ajuda externa se mostrou essencial. Esse trabalho s\u00f3 foi poss\u00edvel gra\u00e7as \u00e0 ajuda de Benoit Tremblay<\/a>, um desenvolvedor que eu n\u00e3o conhe\u00e7o pessoalmente, mas que gentilmente respondeu alguns emails e compartilhou insights decisivos para avan\u00e7armos.
<\/p>\n\n\n\n

Neste artigo, compartilho passo a passo como foi o processo de adicionar suporte a tabelas ao Trix Editor.<\/p>\n\n\n\n

Criando o seletor de tabela<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Meu primeiro objetivo era reproduzir aquele seletor visual de linhas e colunas comum em editores de texto \u2014 uma interface simples, interativa e intuitiva para inserir tabelas. Em vez de criar tudo do zero, decidi aproveitar uma estrutura que o pr\u00f3prio Trix j\u00e1 fornece: a caixa de di\u00e1logo utilizada para inser\u00e7\u00e3o de links.<\/p>\n\n\n\n

Na barra de ferramentas original do editor, ela funciona assim:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A ideia \u00e9 relativamente simples: um bot\u00e3o com o atributo data-trix-action dispara uma a\u00e7\u00e3o interna do editor. No caso acima, a a\u00e7\u00e3o link abre automaticamente o di\u00e1logo associado ao atributo href .<\/p>\n\n\n\n

Para criar algo semelhante, precisamos seguir a conven\u00e7\u00e3o descrita no reposit\u00f3rio do Trix: a\u00e7\u00f5es customizadas devem utilizar o prefixo x- . Quando um bot\u00e3o com data-trixaction=” x-alguma-coisa” \u00e9 clicado, o editor dispara o evento trix-action-invoke , permitindo que adicionemos nosso pr\u00f3prio comportamento. <\/p>\n\n\n\n

Com isso, conseguimos abrir e fechar di\u00e1logos personalizados utilizando apenas um pouco de JavaScript e algumas classes CSS. <\/p>\n\n\n\n

O HTML da nova a\u00e7\u00e3o ficou assim: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

E a implementa\u00e7\u00e3o em JavaScript, adicionada ao mesmo controller Stimulus utilizado no artigo anterior:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nesse ponto, ainda n\u00e3o existe nenhum seletor de tabelas de verdade \u2014 apenas um di\u00e1logo simples contendo um “hello world!” . Mas isso j\u00e1 \u00e9 suficiente para validar a integra\u00e7\u00e3o com o sistema interno de a\u00e7\u00f5es do Trix e confirmar que conseguimos estender sua interface sem modificar diretamente o c\u00f3digo-fonte do editor.<\/p>\n\n\n\n

Agora, com Stimulus, criamos um controller para gerenciar o seletor de tabelas.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

E o di\u00e1logo para representa esse controller.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Com isso, ao clicar no bot\u00e3o da tabela na barra de ferramentas, um di\u00e1logo \u00e9 aberto e permite escolher visualmente a dimens\u00e3o da tabela, isto \u00e9, o n\u00famero de linhas e colunas.<\/p>\n\n\n\n

Ao clicar em um dos quadrados, uma a\u00e7\u00e3o identificada como trix#openTableEditor ser\u00e1 executada. \u00c9 aqui que come\u00e7amos a construir a tabela propriamente dita.<\/p>\n\n\n\n

Criando o editor de tabela<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Uma das coisas que torna o Stimulus muito interessante \u00e9 sua capacidade de inicializar controllers automaticamente quando novos elementos s\u00e3o inseridos no DOM. \u00c9 justamente esse comportamento que iremos aproveitar para adicionar nosso editor de tabelas.<\/p>\n\n\n\n

De volta ao trix-controller , iremos implementar openTableEditor .<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Quando o usu\u00e1rio seleciona a dimens\u00e3o desejada, essa fun\u00e7\u00e3o \u00e9 executada e adiciona ao DOM um controller Stimulus respons\u00e1vel por criar o editor de tabelas.
Como voc\u00ea sabe, o Trix n\u00e3o possui suporte nativo a tabelas. Ent\u00e3o, a solu\u00e7\u00e3o que
encontramos para simular uma tabela \u00e9 criar uma grade HTML e posicionar uma inst\u00e2ncia do editor em cada c\u00e9lula.<\/p>\n\n\n\n

Isso nos permite reutilizar os recursos de edi\u00e7\u00e3o do pr\u00f3prio Trix em cada c\u00e9lula, mas cria um novo problema: n\u00e3o podemos deixar o usu\u00e1rio perceber que, por tr\u00e1s da interface, existem v\u00e1rios editores diferentes.<\/p>\n\n\n\n

Tamb\u00e9m precisamos lidar com as diferentes barras de ferramentas.<\/p>\n\n\n\n

Como utilizamos Bootstrap, aproveitamos o modal fornecido pela biblioteca, envolvido por um wrapper que permite customiz\u00e1-lo facilmente. Como cada projeto pode utilizar ferramentas visuais diferentes, vou me ater aqui aos trechos estritamente necess\u00e1rios para o funcionamento da tabela.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

O c\u00f3digo acima come\u00e7a posicionando um container para as barras de ferramentas no topo do modal. Em seguida, a tabela \u00e9 criada de acordo com as dimens\u00f5es selecionadas, com um trix-editor <\/em>para cada c\u00e9lula.<\/p>\n\n\n\n

Os editores s\u00e3o identificados pelo target editor<\/em> , e quando o controller detecta que um novo editor foi adicionado (atrav\u00e9s de editorTargetConnected ), a barra de ferramentas original \u00e9 trocada por uma outra (customizada, conforme demonstrado no artigo anterior) e essa nova barra de ferramentas \u00e9 posicionada no container mencionado anteriormente.<\/p>\n\n\n\n

Ent\u00e3o, um EventListener <\/em>\u00e9 ligado ao eventos de foco na tabela, de forma que quando o usu\u00e1rio interagir com uma c\u00e9lula (tabela) espec\u00edfica, sua barra de ferramentas \u00e9 mostrada enquanto as outras s\u00e3o ocultadas, tudo via CSS.
Por fim, adicionamos um bot\u00e3o respons\u00e1vel por salvar o conte\u00fado da tabela no editor principal.<\/p>\n\n\n\n

\u00c9 aqui que a ajuda de Benoit foi imprescind\u00edvel.<\/p>\n\n\n\n

Salvando o conte\u00fado no editor principal<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Minhas primeiras tentativas de salvar o conte\u00fado da tabela no editor principal falhavam porque a tabela precisava ser inclu\u00edda como um anexo HTML.<\/strong><\/p>\n\n\n\n

O que eu n\u00e3o sabia era que seria necess\u00e1rio criar um content-type<\/em> pr\u00f3prio para esse anexo. Foi essa informa\u00e7\u00e3o crucial que Benoit compartilhou, junto de algumas fun\u00e7\u00f5es para lidar com a tabela na forma de um anexo.<\/p>\n\n\n\n

Vamos adicionar os seguintes m\u00e9todos ao trix_controller.js<\/em>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Em attachTable<\/em>, utilizamos um parser de tabela para transformar o conte\u00fado de cada editor em c\u00e9lulas de uma tabela HTML real. Em seguida, criamos um Trix.Attachment<\/em> utilizando nosso content-type<\/em> personalizado:<\/p>\n\n\n\n

application\/vnd.acsiv.table.html<\/p>\n\n\n\n

\u00c9 atrav\u00e9s desse tipo que conseguimos inserir um anexo personalizado no Trix e,
posteriormente, identificar se o anexo selecionado pelo usu\u00e1rio \u00e9 uma tabela.<\/p>\n\n\n\n

Essa identifica\u00e7\u00e3o ser\u00e1 importante para permitir que o usu\u00e1rio edite uma tabela que j\u00e1 tenha sido inserida no documento.<\/p>\n\n\n\n

Por fim, precisamos adicionar um novo EventListener<\/em> \u00e0 inicializa\u00e7\u00e3o do nosso controller Stimulus e incluir o TrixTableParser<\/em>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

O m\u00e9todo openTablePickerDialog <\/em>foi ent\u00e3o estendido para identificar se o anexo
selecionado \u00e9 uma tabela e, caso seja, permitir que o usu\u00e1rio a edite.<\/p>\n\n\n\n

Para isso, o conte\u00fado do anexo \u00e9 carregado pelo parser, que reconstr\u00f3i a estrutura da tabela e transforma suas c\u00e9lulas novamente em editores Trix.<\/p>\n\n\n\n

Em seguida, criamos um novo trix-table-editor<\/em>, desta vez carregando o conte\u00fado
original da tabela.<\/p>\n\n\n\n

J\u00e1 detectTableAttachment<\/em> \u00e9 respons\u00e1vel pelo feedback visual: quando o cursor est\u00e1
sobre uma tabela, o bot\u00e3o correspondente na barra de ferramentas \u00e9 marcado como ativo.
<\/p>\n\n\n\n

Agora, confira o c\u00f3digo do TrixTableParser<\/em> :<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

A classe exp\u00f5e dois m\u00e9todos principais. <\/p>\n\n\n\n

import() recebe uma tabela HTML literal e a transforma novamente em uma estrutura que pode ser manipulada pelo controller Stimulus trix-table-editor . Cada c\u00e9lula \u00e9 reconstru\u00edda como uma inst\u00e2ncia do Trix. <\/p>\n\n\n\n

J\u00e1 export() faz o caminho inverso: recebe a estrutura utilizada pelo editor e a transforma em uma tabela HTML literal, pronta para ser armazenada como conte\u00fado do anexo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Com isso, conseguimos implementar tabelas HTML funcionais dentro do Trix<\/strong>, utilizando essencialmente o Stimulus e os mecanismos de extens\u00e3o oferecidos pelo pr\u00f3prio editor.<\/p>\n\n\n\n

Foi um trabalho relativamente extenso, mas bastante gratificante \u2014 especialmente porque, apesar de o Trix n\u00e3o possuir suporte nativo a tabelas, conseguimos construir uma solu\u00e7\u00e3o sem precisar modificar diretamente seu c\u00f3digo-fonte. <\/p>\n\n\n\n

E agora?<\/h2>\n\n\n\n


Por\u00e9m, h\u00e1 uma pequena ironia nessa hist\u00f3ria.<\/p>\n\n\n\n

A 37signals<\/strong>, criadora do Trix, anunciou recentemente que pretende substituir o Trix pelo Lexxy,<\/a> um editor de texto moderno baseado no Lexical<\/strong>, do Facebook.<\/p>\n\n\n\n

E, para a nossa felicidade, o novo editor possui integra\u00e7\u00e3o com o ecossistema Rails <\/strong>e suporte nativo a tabelas. Ou seja: depois de todo esse trabalho para colocar tabelas no Trix, talvez n\u00e3o precisemos mais fazer nada disso no futuro.<\/p>\n\n\n\n

Mas, no fim das contas, o objetivo deste artigo n\u00e3o \u00e9 apenas mostrar uma implementa\u00e7\u00e3o espec\u00edfica. O mais interessante foi descobrir at\u00e9 onde podemos levar o Trix utilizando os pr\u00f3prios mecanismos de extens\u00e3o do editor.<\/p>\n\n\n\n

E, para quem ainda precisa trabalhar com Trix, espero que esta implementa\u00e7\u00e3o possa servir como ponto de partida.<\/p>\n\n\n\n

Escrito por: Fillipe Palhares<\/p>\n","protected":false},"excerpt":{"rendered":"

Descubra como estender o Trix Editor para oferecer suporte a tabelas HTML utilizando Stimulus, Rails e um parser personalizado. O artigo apresenta a cria\u00e7\u00e3o do seletor de dimens\u00f5es, o editor de c\u00e9lulas e a integra\u00e7\u00e3o com o sistema de attachments do Trix.<\/p>\n","protected":false},"author":2,"featured_media":1610,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,8],"tags":[1011,841,1300,833,1301,835,1015,834,1299,839],"yoast_head":"\r\n"Implementando suporte a tabelas no Trix Editor"<\/title>\r\n<meta name=\"description\" content=\"Aprenda a implementar tabelas no Trix Editor usando Stimulus, Rails e anexos HTML, sem alterar o c\u00f3digo-fonte do editor.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\""Implementando suporte a tabelas no Trix Editor"\" \/>\r\n<meta property=\"og:description\" content=\"Aprenda a implementar tabelas no Trix Editor usando Stimulus, Rails e anexos HTML, sem alterar o c\u00f3digo-fonte do editor.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog da Acsiv\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/acsiv\" \/>\r\n<meta property=\"article:published_time\" content=\"2026-09-22T18:04:58+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2026-09-22T18:37:14+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/acsiv.com.br\/blog\/wp-content\/uploads\/2026\/09\/Blog-3.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1672\" \/>\r\n\t<meta property=\"og:image:height\" content=\"941\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Eduardo Rodrigues\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:creator\" content=\"@acsiv\" \/>\r\n<meta name=\"twitter:site\" content=\"@acsiv\" \/>\r\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eduardo Rodrigues\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/#organization\",\"name\":\"Acsiv Sistema\",\"url\":\"https:\/\/acsiv.com.br\/blog\/\",\"sameAs\":[\"https:\/\/instagram.com\/acsivsistemas\",\"https:\/\/pt.linkedin.com\/company\/acsiv\",\"https:\/\/www.facebook.com\/acsiv\",\"https:\/\/twitter.com\/acsiv\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/acsiv.com.br\/blog\/wp-content\/uploads\/2020\/10\/Acsiv_logotipo.png\",\"contentUrl\":\"https:\/\/acsiv.com.br\/blog\/wp-content\/uploads\/2020\/10\/Acsiv_logotipo.png\",\"width\":1564,\"height\":668,\"caption\":\"Acsiv Sistema\"},\"image\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/#website\",\"url\":\"https:\/\/acsiv.com.br\/blog\/\",\"name\":\"Blog da Acsiv\",\"description\":\"Conte\u00fado digital para cart\u00f3rios\",\"publisher\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/acsiv.com.br\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\",\"url\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\",\"name\":\"\\\"Implementando suporte a tabelas no Trix Editor\\\"\",\"isPartOf\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/#website\"},\"datePublished\":\"2026-09-22T18:04:58+00:00\",\"dateModified\":\"2026-09-22T18:37:14+00:00\",\"description\":\"Aprenda a implementar tabelas no Trix Editor usando Stimulus, Rails e anexos HTML, sem alterar o c\u00f3digo-fonte do editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/acsiv.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementando suporte a tabelas no Trix Editor\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\"},\"author\":{\"name\":\"Eduardo Rodrigues\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/#\/schema\/person\/54fd566d0efeb6dc731df7e4e38ce156\"},\"headline\":\"Implementando suporte a tabelas no Trix Editor\",\"datePublished\":\"2026-09-22T18:04:58+00:00\",\"dateModified\":\"2026-09-22T18:37:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/\"},\"wordCount\":1653,\"publisher\":{\"@id\":\"https:\/\/acsiv.com.br\/blog\/#organization\"},\"keywords\":[\"#DesenvolvimentoWeb\",\"#FrontEnd\",\"#HTML\",\"#JavaScript\",\"#OpenSource\",\"#Rails\",\"#RubyOnRails\",\"#StimulusJS\",\"#TrixEditor\",\"#WebDevelopment\"],\"articleSection\":[\"Dicas\",\"Tecnologia\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/#\/schema\/person\/54fd566d0efeb6dc731df7e4e38ce156\",\"name\":\"Eduardo Rodrigues\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/acsiv.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fee13940cf1da650036b52bc338d5881?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fee13940cf1da650036b52bc338d5881?s=96&d=mm&r=g\",\"caption\":\"Eduardo Rodrigues\"}}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\"Implementando suporte a tabelas no Trix Editor\"","description":"Aprenda a implementar tabelas no Trix Editor usando Stimulus, Rails e anexos HTML, sem alterar o c\u00f3digo-fonte do editor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/","og_locale":"pt_BR","og_type":"article","og_title":"\"Implementando suporte a tabelas no Trix Editor\"","og_description":"Aprenda a implementar tabelas no Trix Editor usando Stimulus, Rails e anexos HTML, sem alterar o c\u00f3digo-fonte do editor.","og_url":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/","og_site_name":"Blog da Acsiv","article_publisher":"https:\/\/www.facebook.com\/acsiv","article_published_time":"2026-09-22T18:04:58+00:00","article_modified_time":"2026-09-22T18:37:14+00:00","og_image":[{"width":1672,"height":941,"url":"https:\/\/acsiv.com.br\/blog\/wp-content\/uploads\/2026\/09\/Blog-3.jpg","type":"image\/jpeg"}],"author":"Eduardo Rodrigues","twitter_card":"summary_large_image","twitter_creator":"@acsiv","twitter_site":"@acsiv","twitter_misc":{"Escrito por":"Eduardo Rodrigues","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/acsiv.com.br\/blog\/#organization","name":"Acsiv Sistema","url":"https:\/\/acsiv.com.br\/blog\/","sameAs":["https:\/\/instagram.com\/acsivsistemas","https:\/\/pt.linkedin.com\/company\/acsiv","https:\/\/www.facebook.com\/acsiv","https:\/\/twitter.com\/acsiv"],"logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/acsiv.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/acsiv.com.br\/blog\/wp-content\/uploads\/2020\/10\/Acsiv_logotipo.png","contentUrl":"https:\/\/acsiv.com.br\/blog\/wp-content\/uploads\/2020\/10\/Acsiv_logotipo.png","width":1564,"height":668,"caption":"Acsiv Sistema"},"image":{"@id":"https:\/\/acsiv.com.br\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/acsiv.com.br\/blog\/#website","url":"https:\/\/acsiv.com.br\/blog\/","name":"Blog da Acsiv","description":"Conte\u00fado digital para cart\u00f3rios","publisher":{"@id":"https:\/\/acsiv.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/acsiv.com.br\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/","url":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/","name":"\"Implementando suporte a tabelas no Trix Editor\"","isPartOf":{"@id":"https:\/\/acsiv.com.br\/blog\/#website"},"datePublished":"2026-09-22T18:04:58+00:00","dateModified":"2026-09-22T18:37:14+00:00","description":"Aprenda a implementar tabelas no Trix Editor usando Stimulus, Rails e anexos HTML, sem alterar o c\u00f3digo-fonte do editor.","breadcrumb":{"@id":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/acsiv.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementando suporte a tabelas no Trix Editor"}]},{"@type":"Article","@id":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/#article","isPartOf":{"@id":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/"},"author":{"name":"Eduardo Rodrigues","@id":"https:\/\/acsiv.com.br\/blog\/#\/schema\/person\/54fd566d0efeb6dc731df7e4e38ce156"},"headline":"Implementando suporte a tabelas no Trix Editor","datePublished":"2026-09-22T18:04:58+00:00","dateModified":"2026-09-22T18:37:14+00:00","mainEntityOfPage":{"@id":"https:\/\/acsiv.com.br\/blog\/2026\/09\/22\/implementando-suporte-a-tabelas-no-trix-editor\/"},"wordCount":1653,"publisher":{"@id":"https:\/\/acsiv.com.br\/blog\/#organization"},"keywords":["#DesenvolvimentoWeb","#FrontEnd","#HTML","#JavaScript","#OpenSource","#Rails","#RubyOnRails","#StimulusJS","#TrixEditor","#WebDevelopment"],"articleSection":["Dicas","Tecnologia"],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/acsiv.com.br\/blog\/#\/schema\/person\/54fd566d0efeb6dc731df7e4e38ce156","name":"Eduardo Rodrigues","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/acsiv.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fee13940cf1da650036b52bc338d5881?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fee13940cf1da650036b52bc338d5881?s=96&d=mm&r=g","caption":"Eduardo Rodrigues"}}]}},"_links":{"self":[{"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/posts\/1578"}],"collection":[{"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1578"}],"version-history":[{"count":10,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/posts\/1578\/revisions"}],"predecessor-version":[{"id":1621,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/posts\/1578\/revisions\/1621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/media\/1610"}],"wp:attachment":[{"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/acsiv.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}