Dependency-free WYSIWYG markdown/html editor
ac7a698c4f
Usage:
const editor = new RibbitEditor({
themes: [
{ name: 'dark', features: { sourceMode: false } },
{ name: 'minimal', tags: minimalTags },
],
currentTheme: 'dark',
});
The built-in theme is 'ribbit-default' and is always available.
Additional themes from the themes array are registered on top.
|
||
|---|---|---|
| src | ||
| test | ||
| .gitignore | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
ribbit
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), utilitiessrc/ribbit-editor.js— Editor class (RibbitEditor) with VIEW/EDIT/WYSIWYG modessrc/ribbit.css— Editor and content styles
Usage
<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.