Editor

CSS tools such as tailwindcss and unocss are recommended. They make UI customization easier and help build smaller CSS files on demand.

CSS editor preview classes in the default stylesheet.

Basic DOM

HTML
<div class="j-editor is-{size}">...</div>

Sizes

• is-sm small, default
• is-md medium
• is-lg large
• is-xl extra large

Example

This paragraph carries the main content. It supports many inline semantic tags, such as strong text (strong), bold text (b), emphasis (em), italic (i), underline (u), strikethrough (s), deleted text (del), and inserted text (ins).

Heading Level 3

Examples of special text types:

• Highlighted text (mark): used for emphasis
• Secondary note text (small): such as copyright notes
• Superscript: E = mc²; subscript: H₂O
• Abbreviation: CSS is a styling language for the Web
• Definition term: Artificial intelligence (AI) means technology that lets machines simulate human intelligent behavior
• Variable: x = 10
• Program output: File not found.
• Keyboard input: Ctrl + Shift + R
• Time mark: February 8, 2026 14:30

Heading Level 4: Lists and Definitions

HTML

HyperText Markup Language, used to build web page structure.

CSS

Cascading Style Sheets, used to control web page presentation.

JavaScript

A scripting language used to build web page interactions.

Heading Level 5: Quote and Code

"Code is read far more often than it is written."

Code Complete

Inline quote: what you see is what you get is a core idea in rich text editing.

<!-- Regular pre code -->
<div class="j-content">
  <h1>Title</h1>
  <p>Paragraph content...</p>
</div>

HTML
<!-- highlight pre code --><div class="j-content">  <h1>Title</h1>  <p>Paragraph content...</p></div>

Heading Level 6: Media and Embedded Content

Tables and Data Display

Interaction and Metadata

Less Common Semantic Elements

Ruby annotation example, useful for teaching uncommon words:

kanかん jiじ

Bidirectional isolation text, useful for mixed languages: Username: Zhang San

Right-to-left text, such as Arabic: مرحبا بالعالم

Progress indicator, display only: 70%

Meter value: Good

Separators and Line Breaks

This is a normal paragraph. >> Before anything took shape, all was vast and undefined. From emptiness came space, from space came the world, and from the world came breath. Light breath rose and became the sky; heavy breath settled and became the earth. The sky formed first, then the earth found its place. From their joined essence came yin and yang, from yin and yang came the four seasons, and from the four seasons came all things.

New content below the horizontal rule (hr).

Forced
line break example.

Readonly Form Controls, for Display

Input (readonly):

Select: test 1 test 2

Textarea (readonly):

This is prefilled readonly multiline text for style display.

Other

Empty element example: (no visible rendering; allows long words to wrap)

Data attribute display, visually hidden but structurally present: China