Editor de texto rico Componentes

O que é

Quando a pessoa precisa escrever um texto formatado — a descrição de um produto, um post do blog, um aviso com negrito e lista — um <textarea> comum não basta. Coloque sw-editor no textarea e ele vira um editor com barra de ferramentas: negrito, itálico, títulos (H1–H6), listas, alinhamento, cor da letra, marca-texto, link, imagem por endereço, linha divisória, ver o HTML e tela cheia. O que sai dele é HTML, pronto para salvar no banco e mostrar no site.

O JavaScript do núcleo esconde o seu <textarea> e monta o editor logo depois dele. A cada tecla, o HTML escrito é copiado para o seu próprio textarea (escondido), e é ele que o formulário envia, com o name dele (sem name, ele recebe o de sw-editor-name; sem nenhum, content). Editor sem texto envia vazio, então required funciona. Embaixo do editor aparece a contagem de caracteres e palavras, e uma alça para esticar a altura com o mouse. Funciona no tema claro e no escuro.

Quando usar

• Painel admin: descrição de produto, texto de página "Sobre", conteúdo de post do blog.
• Comentário ou depoimento com um pouco de formatação: use a barra reduzida (sw-editor-simple).
• Aviso, e-mail modelo, termo que precisa de título, lista e negrito.
• Não use para um campo de uma linha (nome, e-mail): aí é <input sw-inp>.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. Os botões da barra completa são ícones — eles vêm no swcore.compl.min.css.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque sw-editor no textarea e dê um name — é com esse nome que o texto chega no servidor. Escreva, selecione uma palavra e clique em B.

   <textarea sw-editor name="conteudo" sw-editor-height="140"></textarea>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form sw-frm action="/admin/posts/salvar" method="post">
  <div sw-fld>
    <label for="titulo">Título do post</label>
    <input sw-inp id="titulo" name="titulo">
  </div>
  <div sw-fld>
    <label>Conteúdo</label>
    <textarea sw-editor name="conteudo" sw-editor-height="180"></textarea>
  </div>
  <button type="submit" sw-btn="pri">Publicar post</button>
</form>
<!-- no servidor, $_POST['conteudo'] chega com o HTML do editor -->

<div sw-fld>
  <label>Seu comentário</label>
  <textarea sw-editor sw-editor-simple name="comentario"
            sw-editor-height="90" sw-editor-resizable="false"></textarea>
</div>
<button type="submit" sw-btn="pri p">Comentar</button>

<textarea sw-editor id="descricao" name="descricao"></textarea>

<script>
  const editor = document.getElementById('descricao')._swEditor;

  editor.getValue();                          // devolve o HTML atual
  editor.setValue('<p>Novo <b>texto</b></p>');  // troca o conteúdo
</script>

<form id="form-produto">
  <textarea sw-editor name="descricao"></textarea>
  <button sw-btn="pri">Salvar</button>
</form>

<script>
  const form = document.getElementById('form-produto');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    // FormData já pega o campo escondido que o editor mantém atualizado
    await fetch('/produto/salvar', { method: 'POST', body: new FormData(form) });
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js — o editor.
• swcore.compl.min.css — os ícones da barra completa (a barra reduzida usa letras e funciona sem ele).

Cuidados — erros comuns

• Esquecer o name: o texto chega no servidor como content, não com o nome que você esperava.
• Mostrar no site o HTML salvo sem limpar: o conteúdo é escrito por pessoas. Limpe no servidor (em PHP, por exemplo, com uma lista de tags permitidas) antes de exibir.
• Colocar dois editores com o mesmo name no mesmo formulário — os dois vão com o mesmo nome e um apaga o outro no servidor.
• Editor dentro de uma aba ou modal fechado funciona normalmente; mas se você criar o textarea depois com innerHTML, chame SW.reinit(area).

O que ele não faz

• Link e imagem são inseridos pelo endereço (a caixinha do navegador pergunta a URL). Ele não faz upload de imagem.
• Não tem tabela, vídeo embutido, emoji, nem trabalho em conjunto.
• A alça de esticar funciona com mouse; no celular a altura fica a inicial.
• É feito para textos curtos e médios. Para um site de notícias ou livro, use um editor maior.