Conteúdo editável: contenteditable e spellcheck

Você já imaginou transformar qualquer pedaço de texto na sua página web em uma área onde o usuário pode digitar e editar livremente, como se fosse um editor de texto? E que tal ativar ou desativar a verificação ortográfica para esse conteúdo?

O HTML5 nos trouxe dois atributos globais poderosos que tornam isso possível de forma nativa, sem a necessidade de JavaScript complexo: contenteditable e spellcheck.

O atributo contenteditable: transformando qualquer elemento em um editor

O atributo contenteditable é um atributo global do HTML5. Isso significa que ele pode ser aplicado a qualquer elemento HTML, não apenas a campos de formulário. Quando aplicado, ele transforma o conteúdo desse elemento em uma área editável pelo usuário.

Como funciona:

• Basta adicionar contenteditable="true" a qualquer tag.
• O usuário pode clicar no elemento e começar a digitar, apagar, colar texto, etc.
• O navegador adiciona automaticamente um cursor de texto e permite a edição.

Valores possíveis:

• true: O elemento é editável.
• false: O elemento não é editável (comportamento padrão).
• inherit: O elemento herda o estado de contenteditable do seu elemento pai.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conteúdo Editável</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    .editor {
      border: 1px solid #ccc;
      padding: 10px;
      min-height: 100px;
      margin-top: 10px;
      background-color: #f9f9f9;
    }
    .editor:focus {
      border-color: dodgerblue;
      outline: none;
    }
  </style>
</head>
<body>

  <h1>Meu Editor Simples</h1>

  <p>Clique no texto abaixo para editá-lo:</p>

  <div class="editor" contenteditable="true">
    <p>Este é um parágrafo que você pode editar livremente.</p>
    <p>Tente adicionar mais texto, apagar ou colar algo aqui.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>

  <p>Este parágrafo não é editável.</p>

  <h2 contenteditable="true">Título Editável</h2>

</body>
</html>

Casos de uso:

• Editores WYSIWYG (What You See Is What You Get): A base para editores de texto ricos em navegadores.
• Notas rápidas: Permitir que o usuário edite pequenas seções de conteúdo diretamente na página.
• Formulários complexos: Onde a estrutura do conteúdo editável precisa ser mais flexível que um <textarea>.

Importante:

• O conteúdo editado não é automaticamente enviado com um formulário. Você precisaria de JavaScript para capturar o conteúdo modificado e enviá-lo.
• A estilização e o comportamento (ex: negrito, itálico) ainda precisam ser controlados com CSS e JavaScript.

O atributo spellcheck: verificação ortográfica nativa

O atributo spellcheck também é um atributo global do HTML5. Ele controla se o navegador deve realizar a verificação ortográfica e gramatical no conteúdo editável de um elemento.

Como funciona:

• Pode ser aplicado a elementos com contenteditable="true" ou a campos de formulário como <textarea> e <input type="text">.
• O navegador usa seu dicionário interno para sublinhar palavras potencialmente incorretas.

Valores possíveis:

• true: Ativa a verificação ortográfica para o elemento.
• false: Desativa a verificação ortográfica para o elemento.
• default: O elemento herda o comportamento padrão do navegador ou do elemento pai.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verificação Ortográfica</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    .editor {
      border: 1px solid #ccc;
      padding: 10px;
      min-height: 100px;
      margin-top: 10px;
      background-color: #f9f9f9;
    }
    .editor:focus {
      border-color: dodgerblue;
      outline: none;
    }
    textarea {
      width: 90%;
      height: 80px;
      margin-top: 10px;
      padding: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

  <h1>Verificação Ortográfica com `spellcheck`</h1>

  <p>Este `div` tem `spellcheck="true"`:</p>
  <div class="editor" contenteditable="true" spellcheck="true">
    <p>Este é um parágrafo com alguns erros de ortografia, como "ortogarfia" e "paragarfo".</p>
    <p>O navegador deve sublinhar as palavras erradas.</p>
  </div>

  <p>Este `textarea` tem `spellcheck="false"`:</p>
  <textarea spellcheck="false" placeholder="Digite aqui sem verificação ortográfica."></textarea>

  <p>Este `textarea` usa o padrão do navegador (geralmente `true`):</p>
  <textarea placeholder="Digite aqui com verificação ortográfica padrão."></textarea>

</body>
</html>

Casos de uso:

• Editores de texto: Ativar a verificação ortográfica para ajudar o usuário.
• Campos de formulário: Ativar para campos de texto livre (textarea) ou desativar para campos onde a ortografia não é relevante (ex: códigos, nomes próprios).

Resumindo

• contenteditable="true":
  • Atributo global que torna qualquer elemento HTML editável pelo usuário.
  • O conteúdo editado não é enviado automaticamente com formulários (requer JavaScript).
  • Útil para editores WYSIWYG e áreas de texto flexíveis.
• spellcheck="true" / spellcheck="false":
  • Atributo global que controla a verificação ortográfica e gramatical.
  • Pode ser aplicado a elementos contenteditable ou a campos de formulário (textarea, input type="text").
  • true ativa, false desativa, default usa o padrão do navegador.

Esses atributos oferecem funcionalidades poderosas diretamente no HTML, simplificando a criação de interfaces mais interativas e amigáveis.