LOEditor jQuery WYSIWYG Editor Demo

Editor

Select text for inline tools. Click the image or divider to reveal move and delete controls.

Vanilla JavaScript plus jQuery

<h2>Editorial workspace</h2>
Build a publishing note with strong emphasis, italic detail, underlined terms, highlighted context, <code>inline code</code>, and a <a href="https://example.com">reference link</a>.
<blockquote>Keep the final copy clear, specific, and ready to publish.</blockquote>
Left aligned paragraph for standard body copy.
Centered caption text for a visual block.
Right aligned metadata line.
<ul>
 <li>Draft the heading</li>
 <li>Shape the body copy</li>
 <li>Review the HTML output</li>
</ul>
<ol>
 <li>Select a paragraph</li>
 <li>Apply a block style</li>
 <li>Inspect the saved markup</li>
</ol>
<pre>const html = editor.save();
textarea.value = html;</pre>
<figure>
 <img src="https://picsum.photos/seed/loeditor-demo/1000/560" alt="Editorial desk with interface elements">
 <figcaption>CDN image block loaded from existing HTML.</figcaption>
</figure>
<hr>
<aside class="demo-callout">This callout is handled by a custom LOEditor plugin.</aside>

Clean Output

The textarea value updates automatically as LOEditor saves the current document.

Editor

Clean Output

HTML

Rendered Preview