Package Exports

@joepdooper/mini-editor
@joepdooper/mini-editor/MiniEditor.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@joepdooper/mini-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mini-editor

A lightweight, dependency-free WYSIWYG editor implemented in vanilla JavaScript.

Install:

npm install @joepdoooper/mini-editor

Features:

Inline content editing with a floating formatting toolbar
Supports bold, italic, underline, headings, blockquotes, and links
Automatically positions toolbar based on text selection
Handles plain text pasting to prevent unwanted formatting
Syncs editable content with hidden inputs for form submission

<div class="editor-block" contenteditable="true" data-id="1"></div>
<input type="hidden" id="input_1" name="content_1">

<div class="editor-block" contenteditable="true" data-id="2"></div>
<input type="hidden" id="input_2" name="content_2">

<div id="toolbar" style="display: none;">
    <button title="Bold" data-cmd="bold">Bold</button>
    <button title="Italic" data-cmd="italic">Italic</button>
    <button title="Underline" data-cmd="underline">Underline</button>
    <button title="Link" data-cmd="link">Link</button>
</div>

document.addEventListener('DOMContentLoaded', () => {
    MiniEditor.initAll('.editor-block', '#toolbar');
});