Seu textarea, agora um editor.
Uma linha de jQuery transforma o campo num editor completo. O HTML continua indo no envio do formulário, já limpo contra XSS.
Um arquivo de 141 KB (37 KB com gzip), só depende do jQuery, licença MIT e 127 testes num navegador real.
O assistente de IA desta demonstração responde com um texto de exemplo. No seu site, ele usa o Gemini ou a OpenAI pelo ai-api.php.
O que o formulário recebe
Ao lado, o HTML que o formulário envia. Tudo o que entra passa pelo sanitizador, seja o que você digita, o que cola ou o que chega da IA. Os exemplos rodam no editor desta página.
Enviado no formulário
<h2>Experimente aqui mesmo</h2>O que vem pronto
-
Imagens
Envie pelo botão, arraste o arquivo ou cole um print. Redimensione pela alça e alinhe pela barra da imagem; o upload vai para o seu servidor.
-
Tabelas
Escolha o tamanho numa grade, inclua linhas e colunas pelo menu da célula e ande entre as células com Tab.
-
Fontes do Google
O catálogo inteiro cabe no menu, com busca. Cada família só é baixada quando aparece na lista ou já está no texto.
-
Código-fonte
Edite o HTML com realce e numeração de linhas. O que você muda no código volta para o editor já sanitizado.
-
Tema escuro
Segue a classe
.darkda sua página ou a opçãotheme. As cores são variáveis CSS que você ajusta.
-
Pelo teclado
Alt+F10 leva à barra, as setas andam entre os botões e Ctrl+K abre o link. Leitores de tela anunciam menus e janelas.
Instalação em três trechos
-
Primeiro, inclua o jQuery e o Weaver.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/edersonfr/weaver-editor@v1.1.1/dist/weaver-editor.min.js" integrity="sha384-2O2pulBNAw6/bO1u5dlhjHNDQo3FZiwZuX8LPd1ZQKf9eu8LkLo12tO29HbXyUuH" crossorigin="anonymous"></script>> WysiwygEditor.VERSION '1.1.1' -
Depois, aponte para o seu textarea.
$(function () { $('#artigo').weaver({ height: 400 }); }); -
No envio, o HTML chega no campo de sempre.
$html = $_POST['conteudo_html']; // Limpo no navegador. No modo confiável, valide também no servidor.Dados do formulárioconteudo_html
Vindo do Summernote? A barra usa a mesma sintaxe e os mesmos nomes (style, clear, picture, color, paragraph). Troque .summernote( por .weaver( e revise as demais opções.
Documentação completa, do README.
Abrir no GitHubCarregando a documentação… Se ela não aparecer, leia o README no GitHub.