oziEditor

Versión: 2.0.0 — Actualizado: 2026-05-27

Descripción

Editor visual ligero activado sobre un textarea, enfocado en la integración simple con formularios y la sincronización natural con el backend. El textarea sigue siendo el campo real de envío — el plugin solo crea una interfaz visual sobre él, haciéndolo más estable en escenarios con Livewire y reduciendo conflictos con el re-render.

Ejemplos

[1] Estructura base

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

[2] Estructura completa — todas las herramientas

<textarea
    name="descripcion"
    data-ozi-editor="descripcion"
    data-ozi-editor-tools="bold,italic,underline,ul,ol,code,table,clear,left,center,right"
    data-ozi-editor-lang="es"
    data-ozi-editor-uicolor="#9AB8F3"
    data-ozi-editor-placeholder="Escribe aquí..."
    data-ozi-editor-height="220px"
    data-ozi-editor-required
    data-ozi-editor-required-message="La descripción es obligatoria.">
</textarea>

[3] Agrupamiento de botones en la toolbar

Usa [ ] para agrupar botones, , para separar elementos y ; para saltar de línea. Hace la toolbar visualmente más organizada.

<textarea
    name="descripcion"
    data-ozi-editor="descripcion"
    data-ozi-editor-tools="[bold,italic,underline],[ul,ol],code;table,clear,[left,center,right]"
    data-ozi-editor-lang="es"
    data-ozi-editor-uicolor="#9AB8F3"
    data-ozi-editor-placeholder="Escribe aquí..."
    data-ozi-editor-height="220px">
</textarea>

[ ] agrupa botones visualmente — bold,italic,underline quedan juntos. , separa los elementos dentro y fuera de los grupos. ; salta la línea de la toolbar.

[4] Color personalizado vía uiColor

El color se aplica al foco, borde activo y botones de la 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>

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

[5] Ejemplo de salida enviada al backend

El textarea recibe HTML limpio y controlado tras la edición del usuario:

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

El backend trabaja con el campo normalmente — sin necesidad de conocer la UI del editor.

[6] Uso vía JavaScript

// Inicializar todos los editores de la página
OziEditor.init();

// Obtener valor
const html = OziEditor.value('descripcion');

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

// Destruir instancia
OziEditor.destroy('descripcion');

// Recargar instancia
OziEditor.reload('descripcion');

// Contenido cargado vía fetch
oziEditorInitFetched($('#destino'));

Características

• Integración con formularios — el textarea es el valor real enviado al backend
• Herramientas controladas — conjunto reducido y configurable en la toolbar
• Color personalizable — uiColor aplica el color al foco y botones activos
• Tema claro/oscuro — soporte mediante variables CSS
• Sanitización de HTML — elimina etiquetas fuera del conjunto permitido al pegar
• Validación — campo obligatorio con mensaje personalizado
• Compatible con Livewire — evita conflictos de re-render
• API pública — métodos para inicializar, leer, definir y destruir

Atributos HTML

[1] Identificación

[2] Configuración Visual

[3] Estado y Validación

[4] Herramientas disponibles

[5] HTML permitido

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

Cómo funciona

1. El plugin encuentra el textarea
2. Crea la interfaz visual del editor sobre él
3. El usuario edita en modo visual
4. El contenido HTML es sanitizado
5. El valor final se sincroniza con el textarea
6. El formulario envía normalmente el valor del textarea

API Pública