富文本编辑器

👀 Rich Text Editor

Rich Text Editor - Compose and format text with headings, lists, bold, italic and links, with live HTML preview and one-click copy. Runs in your browser.

📐 工作原理与说明
所见即所得的富文本编辑器。
  • 实现:基于 contenteditable 或自维护文档模型(如 ProseMirror、Slate)。
  • 命令:加粗、斜体、标题、列表、链接、代码块等,通过命令系统操作选区内容。
  • 安全:粘贴内容必须净化,输出 HTML 前必须过滤,否则极易引入 XSS。
  • 难点:各浏览器的选区、输入法与撤销栈行为差异较大。

欢迎使用富文本编辑器

在这里直接输入或粘贴内容,使用上方工具栏排版。支持 超链接、彩色文字 与 行内代码。

  • 列表项一
  • 列表项二
引用示例:所有处理都在本地浏览器完成。
字符数 0 不含空格 0 词数 0 段落数 0 链接数 0 图片数 0 HTML 体积 0 B
HTML 源码(可反向编辑)

📚 深度解析:Rich Text Editor

💡 常见使用场景

  • 在线编辑带格式文本并导出 HTML。
  • 给 CMS 或后台编辑公告内容:排版完成后取 HTML 直接入库,省去让运营手写标签。
编辑
加粗/列表/链接后导出对应 HTML 片段。

❓ 常见问题(FAQ)

粘贴会带样式吗?
通常做净化防止 XSS。
生成的内容能直接存进数据库吗?
可以存,但必须在服务端做消毒(sanitize):富文本的 HTML 来自不可信输入,直接渲染等于开放 XSS。应使用白名单策略只保留必要的标签与属性(去掉 script、iframe、on* 事件与 style),并在入库与渲染前各做一次,避免只做前端过滤。
⚠️ 使用说明与注意事项