Playground · Social

Social post editor demo — images, video embeds, mentions & hashtags

A creator post composer: inline photos and embedded video with drag-to-resize, colour and highlight, emoji, and @mentions and #hashtags. The build for social feeds, community posts and anywhere rich media travels inside the text.

A creator post with a photo and an embedded video, drag-to-resize media, colours, mentions and hashtags.

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

social.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, Color, Background, Image, Video, Emoji, Toolbar, History, SlashMenu,
  BlockToolbar, 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/color', Color],
  ['formats/background', Background], ['formats/image', Image], ['formats/video', Video],
  ['formats/emoji', Emoji],
  ['modules/toolbar', Toolbar], ['modules/history', History], ['modules/slash-menu', SlashMenu],
  ['modules/block-toolbar', BlockToolbar], ['modules/resize-handles', ResizeHandles]
].forEach(([k, v]) => registry.register(k, v));

new Editor('#editor', {
  width: '100%',
  content:
    '<h2>🌅 48 hours in Da Lat</h2>' +
    '<p>Best long weekend this year — <b>pine forests</b>, <i>cold brew</i>, ' +
    'and endless <span style="color: #6d5efc">#views</span> 📸</p>' +
    '<img class="inserted-image" src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=900&q=80" ' +
    'alt="Misty pine hills" style="max-width: 100%; height: auto; border-radius: 10px">' +
    '<p>🎬 Watch the 60-second recap:</p>' +
    '<iframe class="inserted-video youtube-video" src="https://www.youtube.com/embed/ScMzIvxBSi4" ' +
    'width="560" height="315" style="max-width: 100%; border-radius: 10px" frameborder="0" allowfullscreen></iframe>' +
    '<p>Shoutout to <span style="color: #1c7ed6">@travelcrew</span> 💚 ' +
    '<span style="color: #6d5efc">#dalat</span> <span style="color: #6d5efc">#vietnam</span> ' +
    '<span style="color: #6d5efc">#travel</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', 'text-align'] },
    { group: 'insert', items: ['image', 'video', 'emoji'] },
    { group: 'history', items: ['undo', 'redo'] }
  ],
  formats: ['bold', 'italic', 'underline', 'strike', 'color', 'background',
    'heading', 'text-align', 'list', 'link', 'image', 'video', 'emoji'],
  modules: ['toolbar', 'history', 'slash-menu', 'block-toolbar', 'resize-handles']
});

Live previewimage + video