WangEditor 编辑器演示示例

欢迎使用 WangEditor 富文本编辑器！下面是编辑器支持的所有内容类型的演示。

📝 文本格式演示

这是一个普通段落。WangEditor 支持 粗体文本、斜体文本、下划线文本 和 删除线文本。

📋 列表演示

有序列表：

• 第一项

• 第二项

• 第三项

无序列表：

• 首要功能

• 次要功能

• 其他功能

💻 代码块演示

// JavaScript 示例代码function helloWorld() { console.log('Hello, WangEditor!'); return true;

📌 引用块演示

这是一个引用块。通常用于强调重要的信息或引用他人的观点。 引用块可以包含多个段落。

🎨 表格演示

功能支持情况说明富文本格式✅ 完全支持粗体、斜体、下划线等图片插入✅ 完全支持本地上传、URL链接、水印视频插入✅ 完全支持YouTube、B站、本地视频表格编辑✅ 完全支持插入、删除行列脚本执行❌ 不支持出于安全考虑自动过滤

🔗 链接演示

这是一个 WangEditor 官网链接。

📸 图片和视频

使用顶部工具栏可以：

• 点击 "图片" 按钮选择或上传图片

• 点击 "视频" 按钮选择或添加视频

• 为图片添加水印标记

YouTube 视频示例：

上面是一个 YouTube 视频播放器示例。支持直接在编辑器中嵌入和查看。

Outline 块中的 YouTube 视频：

这是一个带 outline 虚线边框的 YouTube 视频示例。outline 不占用空间，一个非常实用的 CSS 技巧。

✨ 分割线演示

上面是一条分割线。

💡 编辑器特点

自动保存： 编辑内容会自动保存到浏览器本地存储（localStorage） 实时预览： 所见即所得的编辑体验 安全渲染： 自动过滤不安全的脚本和标签 丰富工具栏： 完整的格式化和插入工具

🎯 开始编辑

现在你可以开始编辑这个内容了！点击上方的 "发布" 按钮将内容保存到项目中。