Markdown WYSIWYG Editor

A versatile JavaScript-based Markdown editor that offers a seamless experience by allowing users to switch between a What-You-See-Is-What-You-Get (WYSIWYG) visual editor and a raw Markdown text editor. It comes with a customizable toolbar, undo/redo functionality, and intelligent Markdown-to-HTML (and vice-versa) conversion.

Features

• Dual Editing Modes:
  • WYSIWYG Mode: Edit rich text visually with familiar formatting tools.
  • Markdown Mode: Directly write and edit Markdown syntax in a textarea.
• Easy Mode Switching: Instantly toggle between WYSIWYG and Markdown views using intuitive tabs.
• Comprehensive Toolbar:
  • Headings (H1, H2, H3)
  • Bold, Italic, Strikethrough
  • Hyperlinks
  • Unordered and Ordered Lists
  • Indent and Outdent (for lists)
  • Blockquotes
  • Horizontal Rules
  • Tables (with interactive grid selector)
  • Code Blocks and Inline Code
  • SVG icons for a clean and modern look
• Smart Conversion:
  • Uses Marked.js for Markdown → HTML
  • Custom-built HTML → Markdown parser
• Undo/Redo support in both modes
• Customizable:
  • Initial value
  • Toolbar visibility
  • Toolbar buttons
  • Table grid dimensions
  • onUpdate callback
• Keyboard Shortcuts:
  • Tab / Shift+Tab: Indent/outdent, table cell nav
  • Ctrl+Z / Cmd+Z: Undo
  • Ctrl+Y / Ctrl+Shift+Z: Redo
• Lightweight and self-contained

Demo

You can run the index.html file in your browser to see a live demonstration of the editor.
Or online here: demo

Installation / Setup

Include CSS:

<link rel="stylesheet" href="dist/editor.css">

Include JavaScript:

<!-- Dependency: Marked.js -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<!-- Editor Script -->
<script src="dist/editor.js"></script>

Create an HTML Container:

<div id="myMarkdownEditor"></div>

Initialize via JavaScript:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const editor = new MarkdownWYSIWYG('myMarkdownEditor', {
    initialValue: "## Hello World!\n\nThis is **Markdown** content.",
    onUpdate: (markdownContent) => {
      console.log("Updated content:", markdownContent);
    }
  });
});
</script>

Options

Option	Type	Default	Description
initialValue	string	''	The initial Markdown content to load.
showToolbar	boolean	true	Whether to display the toolbar.
buttons	array	default	Custom toolbar button list.
onUpdate	function	null	Callback triggered on content change.
initialMode	string	'wysiwyg'	Starting mode: 'wysiwyg' or 'markdown'.
tableGridMaxRows	number	10	Max rows in the insert table selector grid.
tableGridMaxCols	number	10	Max columns in the insert table selector grid.

Public Methods

• getValue(): Returns the current Markdown content as string.
• setValue(markdownString, isInitialSetup): Sets the content of the editor.
• switchToMode(mode): Switches mode: 'wysiwyg' or 'markdown'.
• destroy(): Destroys the editor and cleans up listeners.

CDN Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/celsowm/markdown-wysiwyg/dist/editor.css" />
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/celsowm/markdown-wysiwyg@latest/dist/editor.js"></script>

HTML → Markdown Conversion

The _htmlToMarkdown function (and helpers) recursively convert HTML from the visual editor into valid Markdown:

• Converts tags like <b>, <em>, <h1>, <ul>, <table>, <code>, etc.
• Detects code blocks and inline code
• Properly formats nested lists and blockquotes
• Escapes special characters (|, _, etc.)
• Handles <th> vs <td> to produce proper Markdown tables

Contributing

Contributions are welcome!

1. Fork the repo
2. Create a feature branch
3. Commit and push
4. Open a pull request

License

MIT License. See LICENSE file for details.