Playground · Basic

Basic rich text editor demo — blog & notes with a slash menu

A comfortable everyday editor for blogs and notes: headings, lists, alignment, strike-through and links, plus a / command menu and the floating bubble bar. Around 28 KB — a balanced middle ground between the minimal comment box and the full CMS build.

Blog / notes — try typing / for the command menu.

💡 The code shown imports from the CDN for copy-paste; here it runs against a pre-loaded core. Edit anything and hit Run.

basic.js

// Stylesheet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
import { Editor, registry, Bold, Italic, Underline, Strike, Link, Heading, List,
  TextAlign, FontFamily, Toolbar, History, SlashMenu, BlockToolbar } from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd/core.js';

registry.register('formats/bold', Bold);
registry.register('formats/italic', Italic);
registry.register('formats/underline', Underline);
registry.register('formats/strike', Strike);
registry.register('formats/link', Link);
registry.register('formats/heading', Heading);
registry.register('formats/list', List);
registry.register('formats/text-align', TextAlign);
registry.register('formats/font-family', FontFamily);
registry.register('modules/toolbar', Toolbar);
registry.register('modules/history', History);
registry.register('modules/slash-menu', SlashMenu);
registry.register('modules/block-toolbar', BlockToolbar);

new Editor('#editor', {
  width: '100%',
  content: '<h2>🍞 Weekend baking win</h2><p>The sourdough finally worked — <b>crispy crust</b>, <i>open crumb</i>, <s>no more bricks</s> 🙌</p><p>My tweaks 👇</p><ul><li>🧊 Overnight cold proof</li><li>🔥 Hotter oven + steam</li></ul><ol><li>Mix &amp; rest</li><li>Stretch &amp; fold ×4</li><li>Shape &amp; chill</li></ol><p style="text-align: center">📍 <span style="color: #6d5efc">#sourdough</span> <span style="color: #6d5efc">#homebaking</span> <span style="color: #6d5efc">#foodie</span></p>',
  placeholder: 'Write your post…',
  toolbar1: [
    { group: 'text-format', items: ['bold', 'italic', 'underline', 'strike'] },
    { group: 'paragraph', items: ['heading'] },
    { group: 'link', items: ['link'] },
    { group: 'paragraph-ops', items: ['list', 'text-align'] },
    { group: 'history', items: ['undo', 'redo'] }
  ],
  formats: ['bold', 'italic', 'underline', 'strike', 'heading', 'list', 'text-align', 'font-family', 'link'],
  modules: ['toolbar', 'history', 'slash-menu', 'block-toolbar']
});

Live preview~28 KB JS