Playground · Standard

Full-featured rich text editor demo — CMS & docs (tables, images)

The CMS and documents build: text colour and highlight, images with drag-to-resize, tables, find & replace, indentation, font sizing and an HTML code view — around 46 KB. Everything a content editor needs without pulling the entire all-in-one bundle.

CMS / docs — colour, image, table, find & replace, code view.

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

standard.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, Color, Background, Image, Table, IndentIncrease,
  IndentDecrease, TextSize, Toolbar, History, SlashMenu, BlockToolbar,
  TableToolbar, FindReplace, CodeView, ResizeHandles } from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd/core.js';

[
  ['formats/bold', Bold], ['formats/italic', Italic], ['formats/underline', Underline],
  ['formats/strike', Strike], ['formats/link', Link], ['formats/heading', Heading],
  ['formats/list', List], ['formats/text-align', TextAlign], ['formats/font-family', FontFamily],
  ['formats/color', Color], ['formats/background', Background], ['formats/image', Image],
  ['formats/table', Table], ['formats/text-size', TextSize],
  ['formats/indent-increase', IndentIncrease], ['formats/indent-decrease', IndentDecrease],
  ['modules/toolbar', Toolbar], ['modules/history', History], ['modules/slash-menu', SlashMenu],
  ['modules/block-toolbar', BlockToolbar], ['modules/table-toolbar', TableToolbar],
  ['modules/find-replace', FindReplace], ['modules/code-view', CodeView],
  ['modules/resize-handles', ResizeHandles]
].forEach(([k, v]) => registry.register(k, v));

new Editor('#editor', {
  width: '100%',
  content: '<h1>🚀 Q3 product update</h1><p>Big quarter, team! <span style="color: #6d5efc"><b>3 new features</b></span> shipped, plus a few <span style="background-color: #fff3bf">things to watch</span> 👀</p><img class="inserted-image" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&amp;q=80" alt="Dashboard screenshot" style="max-width: 100%; height: auto; border-radius: 8px"><p>Shoutout to <span style="color: #1c7ed6">@design</span> &amp; <span style="color: #1c7ed6">@mobile</span> 💜</p><h2>📊 Release summary</h2><table class="rich-editor-table"><tbody><tr><td><b>Area</b></td><td><b>Status</b></td></tr><tr><td>Editor</td><td>🟢 <span style="color: #2f9e44">Shipped</span></td></tr><tr><td>Mobile apps</td><td>🟠 <span style="color: #e8590c">In progress</span></td></tr><tr><td>Search</td><td>🔵 <span style="color: #1c7ed6">Planned</span></td></tr></tbody></table><p>Full notes in the <a href="https://example.com/changelog">changelog</a> · <span style="color: #6d5efc">#productupdate</span> <span style="color: #6d5efc">#shipit</span></p>',
  toolbar1: [
    { group: 'text-format', items: ['bold', 'italic', 'underline', 'strike'] },
    { group: 'paragraph', items: ['heading'] },
    { group: 'colors', items: ['color', 'background'] },
    { group: 'link', items: ['link'] },
    { group: 'paragraph-ops', items: ['list', 'indent-increase', 'indent-decrease', 'text-align'] },
    { group: 'insert', items: ['image', 'table'] },
    { group: 'font', items: ['text-size'] },
    { group: 'tools', items: ['find', 'code-view'] },
    { group: 'history', items: ['undo', 'redo'] }
  ],
  formats: ['bold', 'italic', 'underline', 'strike', 'color', 'background', 'heading',
    'text-size', 'text-align', 'list', 'indent-increase', 'indent-decrease', 'link', 'image', 'table'],
  modules: ['toolbar', 'history', 'slash-menu', 'block-toolbar', 'table-toolbar',
    'find-replace', 'code-view', 'resize-handles']
});

Live preview~46 KB JS