2026-04-28 16:21:33 -07:00
|
|
|
# ribbit
|
|
|
|
|
|
2026-04-28 09:59:30 -07:00
|
|
|
Zero-dependency WYSIWYG markdown editor
|
|
|
|
|
|
|
|
|
|
## Files
|
|
|
|
|
|
|
|
|
|
- `src/hopdown.js` — Markdown ↔ HTML converter (`HopDown.toHTML()`, `HopDown.toMarkdown()`)
|
|
|
|
|
- `src/ribbit.js` — Base viewer class (`Ribbit`), plugin base class (`RibbitPlugin`), utilities
|
|
|
|
|
- `src/ribbit-editor.js` — Editor class (`RibbitEditor`) with VIEW/EDIT/WYSIWYG modes
|
|
|
|
|
- `src/ribbit.css` — Editor and content styles
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<link rel="stylesheet" href="ribbit/src/ribbit.css">
|
|
|
|
|
<article id="ribbit">your markdown here</article>
|
|
|
|
|
|
|
|
|
|
<script src="ribbit/src/hopdown.js"></script>
|
|
|
|
|
<script src="ribbit/src/ribbit.js"></script>
|
|
|
|
|
<script src="ribbit/src/ribbit-editor.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
const editor = new RibbitEditor({ plugins: [] });
|
|
|
|
|
editor.run();
|
|
|
|
|
|
|
|
|
|
// Switch modes
|
|
|
|
|
editor.wysiwyg(); // WYSIWYG editing
|
|
|
|
|
editor.edit(); // Source editing
|
|
|
|
|
editor.view(); // Read-only view
|
|
|
|
|
|
|
|
|
|
// Get content
|
|
|
|
|
editor.getMarkdown();
|
|
|
|
|
editor.getHTML();
|
|
|
|
|
</script>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Supported Markdown
|
|
|
|
|
|
|
|
|
|
Bold, italic, inline code, links, headings (h1-h6), unordered/ordered/nested lists,
|
|
|
|
|
blockquotes, fenced code blocks with language, horizontal rules, GFM tables with
|
|
|
|
|
column alignment, and paragraphs. Arbitrary nesting of all inline formatting.
|
|
|
|
|
|
|
|
|
|
## Tests
|
|
|
|
|
|
|
|
|
|
Open `test/test_ribbit-down.html` in a browser.
|
