编辑器

推荐使用 tailwindcss, unocss 等 CSS 工具，更有利于个性化定制 UI 和按需构建最小化 CSS 文件。

默认样式文件中的 CSS 编辑器预览样式类。

CSS

基础 DOM

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

不同尺寸

is-sm 小尺寸，默认
is-md 中尺寸
is-lg 大尺寸
is-xl 超大尺寸

示例

这是段落文本，用于承载主要信息。支持多种内联语义标签，例如：加粗（strong）、加粗（b）、强调（em）、斜体（i）、下划线（u）、~~删除线（s）~~、~~删除（del）~~、插入（ins）。

三级标题

特殊文本类型示例：

高亮文本（mark）：用于突出显示
次要说明文字（small）：如版权信息
上标：E = mc²；下标：H₂O
缩写：CSS 是网页样式语言
定义术语：人工智能（AI）指由机器模拟人类智能行为的技术
变量：x = 10
程序输出：File not found.
键盘输入：Ctrl + Shift + R
时间标记：2026年2月8日 14:30

四级标题：列表与定义

HTML: 超文本标记语言，用于构建网页结构。
CSS: 层叠样式表，用于控制网页外观。
JavaScript: 一种脚本语言，用于实现网页交互功能。

五级标题：引用与代码

“代码是写给人看的，附带能在机器上运行。”
《代码大全》

行内引用：所见即所得是 富文本编辑 的核心理念。

<!-- 常规 pre code -->
<div class="j-content">
  <h1>标题</h1>
  <p>段落内容...</p>
</div>

HTML
<!-- highlight pre code --><div class="j-content">  <h1>标题</h1>  <p>段落内容...</p></div>

六级标题：媒体与嵌入内容

示例图片 — 图1：这是一张占位图片，alt 文本完整Description其用途。

图2：视频嵌入示例

音频播放控件

嵌入的第三方内容（如地图或文档）

表格与数据展示

用户信息表
ID	姓名	邮箱	Status
001	张伟	zhangwei@example.com	活跃
002	李娜	lina@example.com	休眠

交互与元信息

点击展开技术栈详情

本项目使用以下技术：

前端：React + TypeScript
样式：CSS Modules + PostCSS
构建：Vite

数据库：MongoDB

联系我们：
邮箱：contact@example.com
地址：中国上海市浦东新区世纪大道 100 号

低频语义元素

中文注音示例（适用于生僻字教学）：

麒qí 麟lín

双向隔离文本（用于混合语言）：用户名：张三

从右向左文本（如阿拉伯语）：مرحبا بالعالم

进度指示（仅展示，非交互）：70%

计量值：良好

分隔与换行

此处为普通段落。>> 天墬未形，冯冯翼翼，洞洞灟灟，故曰太昭。道始生虚廓，虚廓生宇宙，宇宙生气。气有涯垠，清阳者薄靡而为天，重浊者凝滞而为地。清妙之合专易，重浊之凝竭难，故天先成而地后定。天地之袭精为阴阳，阴阳之专精为四时，四时之散精为万物。积阳之热气生火，火气之精者为日；积阴之寒气为水，水气之精者为月；日月之淫为精者为星辰，天受日月星辰，地受水潦尘埃。

水平线（hr）下方的新内容区块。

强制
换行示例。

只读表单控件（用于展示）

输入框（只读）：

选择器：

多行文本（只读）：

这是预填充的只读多行文本内容，用于展示样式。

其他

空元素示例：（无实际渲染，用于允许长单词换行）

数据属性展示（视觉不可见，但结构存在）：中国