oziEditor

Version: 2.0.0 — Updated: 2026-05-27

Description

Lightweight visual editor activated over a textarea, focused on simple form integration and natural backend synchronization. The textarea remains the actual submission field — the plugin only creates a visual interface over it, making it more stable in Livewire scenarios and reducing re-render conflicts.

Examples

[1] Base structure

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

[2] Full structure — all tools

<textarea
    name="description"
    data-ozi-editor="description"
    data-ozi-editor-tools="bold,italic,underline,ul,ol,code,table,clear,left,center,right"
    data-ozi-editor-lang="en"
    data-ozi-editor-uicolor="#9AB8F3"
    data-ozi-editor-placeholder="Type here..."
    data-ozi-editor-height="220px"
    data-ozi-editor-required
    data-ozi-editor-required-message="Description is required.">
</textarea>

[3] Toolbar button grouping

Use [ ] to group buttons, , to separate items and ; to break the line. Makes the toolbar visually cleaner.

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

[ ] groups buttons visually — bold,italic,underline stay together. , separates items inside and outside groups. ; breaks the toolbar line.

[4] Custom color via uiColor

The color is applied to focus, active border and toolbar buttons.

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

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

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

[5] Sample output sent to backend

The textarea receives clean, controlled HTML after the user edits:

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

The backend works with the field normally — without needing to know the editor UI.

[6] Usage via JavaScript

// Initialize all editors on the page
OziEditor.init();

// Get value
const html = OziEditor.value('description');

// Set value
OziEditor.value('description', '<p>Initial text</p>');

// Destroy instance
OziEditor.destroy('description');

// Reload instance
OziEditor.reload('description');

// Content loaded via fetch
oziEditorInitFetched($('#destination'));

Features

• Form integration — the textarea is the actual value sent to the backend
• Controlled tools — lean and configurable toolbar set
• Customizable color — uiColor applies color to focus and active buttons
• Light/dark theme — support via CSS variables
• HTML sanitization — removes tags outside the allowed set when pasting
• Validation — required field with custom message
• Livewire compatible — avoids re-render conflicts
• Public API — methods to initialize, read, set and destroy

HTML Attributes

[1] Identification

[2] Visual Configuration

[3] State and Validation

[4] Available Tools

[5] Allowed HTML

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

How it works

1. The plugin finds the textarea
2. Creates the visual editor interface over it
3. The user edits in visual mode
4. HTML content is sanitized
5. The final value is synced back to the textarea
6. The form submits the textarea value normally

Public API