1 pointby nezanuha3 hours ago1 comment
  • nezanuha3 hours ago
    Most Markdown editors replace the textarea entirely. You lose native form submission, you need axios or fetch to collect the value, and you're locked into a custom API just to get or set content.

    This plugin takes a native-first approach. Just initialize it — your textarea becomes a full advanced Markdown editor while still working exactly like a native textarea.

    Backend developers: your form submits as normal.

    new MarkdownEditor('#editor');

    $_POST['content'], request.form['content'], params[:content] — nothing changes on your end.

    Frontend developers: get and set content the same way you always have.

    // get document.getElementById('editor').value

    // set document.getElementById('editor').value = '## Hello' // editor UI updates automatically

    No axios. No interceptors. No custom APIs. Just native textarea behavior you already know.

    Configure as needed:

    new MarkdownEditor('#editor', { mode: 'hybrid', toolbar: ['bold', 'italic', 'code', 'table', 'image', 'preview'], fileInput: { uploadUrl: '/api/upload', accept: ['webp', 'avif'] } });

    Two modes: Plain (raw Markdown) or Hybrid (WYSIWYG-style, renders live as you type).

    Also includes: real-time preview, undo/redo with cursor restore, GitHub-style list continuation, image uploads to your own server, modular toolbar, RTL support, dark mode, ARIA accessible, zero CSS bleed, ~116KB minified. ESM / UMD / CJS / IIFE / CDN.

    npm install markdown-text-editor Docs: https://frutjam.com/plugins/markdown-editor