oziEditor

Versão: 1.1.0 — Atualizado em: 2026-04-17

Descrição

Editor visual leve ativado sobre um textarea, com foco em integração simples com formulários e sincronização natural com backend. O textarea continua sendo o campo real de envio — o plugin apenas cria uma interface visual sobre ele, tornando-o mais estável em cenários com Livewire e reduzindo conflitos com re-render.

Exemplos

[1] Estrutura base

<textarea
    name="descricao"
    data-ozi-editor="descricao">
</textarea>

[2] Estrutura completa — todas as ferramentas

<textarea
    name="descricao"
    data-ozi-editor="descricao"
    data-ozi-editor-tools="bold,italic,underline,ul,ol,code,table,clear,left,center,right"
    data-ozi-editor-lang="pt-br"
    data-ozi-editor-uicolor="#9AB8F3"
    data-ozi-editor-placeholder="Digite aqui..."
    data-ozi-editor-height="220px"
    data-ozi-editor-required
    data-ozi-editor-required-message="Descrição é obrigatória.">
</textarea>

[3] Agrupamento de botões na toolbar

Use [ ] para agrupar botões, a vírgula , para separar e o ; quebra a linha. Deixa a toolbar mais organizada visualmente.

<textarea
    name="descricao"
    data-ozi-editor="descricao"
    data-ozi-editor-tools="[bold,italic,underline],[ul,ol],code;table,clear,[left,center,right]"
    data-ozi-editor-lang="pt-br"
    data-ozi-editor-uicolor="#9AB8F3"
    data-ozi-editor-placeholder="Digite aqui..."
    data-ozi-editor-height="220px">
</textarea>

[ ] agrupa botões visualmente — bold,italic,underline ficam juntos. , separa os itens dentro e fora dos grupos. ; quebra a linha da toolbar.

[4] Cor customizada via uiColor

A cor é aplicada no foco, borda ativa e botões da toolbar.

<!-- Azul -->
<textarea data-ozi-editor="editor1" data-ozi-editor-uicolor="#9AB8F3"></textarea>

<!-- Verde -->
<textarea data-ozi-editor="editor2" data-ozi-editor-uicolor="#27ae60"></textarea>

<!-- Laranja -->
<textarea data-ozi-editor="editor3" data-ozi-editor-uicolor="#e67e22"></textarea>

[5] Exemplo de saída enviada ao backend

O textarea recebe HTML limpo e controlado após o usuário editar:

<p>Texto normal</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<pre><code>const x = 10;</code></pre>

O backend trabalha com o campo normalmente — sem precisar conhecer a UI do editor.

[6] Uso via JavaScript

// Inicializar todos os editores da página
OziEditor.init();

// Obter valor
const html = OziEditor.value('descricao');

// Definir valor
OziEditor.value('descricao', '<p>Texto inicial</p>');

// Destruir instância
OziEditor.destroy('descricao');

// Recarregar instância
OziEditor.reload('descricao');

// Conteúdo carregado via fetch
oziEditorInitFetched($('#destino'));

Recursos

• Integração com formulários — o textarea é o valor real enviado ao backend
• Ferramentas controladas — conjunto enxuto e configurável na toolbar
• Cor customizável — uiColor aplica a cor no foco e botões ativos
• Tema claro/escuro — suporte via CSS variables
• Sanitização de HTML — remove tags fora do conjunto permitido ao colar
• Validação — campo obrigatório com mensagem customizada
• Compatível com Livewire — evita conflitos de re-render
• API pública — métodos para inicializar, ler, definir e destruir

Atributos HTML

[1] Identificação

[2] Configuração Visual

[3] Estado e Validação

[4] Ferramentas disponíveis

[5] HTML Permitido

p, br, strong, em, u, ul, ol, li, pre, code,
table, thead, tbody, tr, td, th

Como funciona

1. O plugin encontra o textarea
2. Cria a interface visual do editor sobre ele
3. O usuário edita no modo visual
4. O conteúdo HTML é sanitizado
5. O valor final é sincronizado com o textarea
6. O formulário envia normalmente o valor do textarea

API Pública