在线 HTML 编辑器

左边排版，右边出代码。从 Word、WPS 或别的网页复制过来的内容，粘贴的瞬间就会被剥掉 mso- 系列样式、<o:p> 这类专有标签和层层嵌套的空 span——那些东西贴进 CMS 后台往往就是排版错乱的元凶。写完切到源码模式还能美化或压缩，直接复制走。内容只在你的浏览器里处理，不会上传。

两个模式是怎么同步的

可视化模式下你每敲一个字，源码就跟着更新；点「</> 源码」切过去改代码，切回来时再把代码解析成可视化内容。之所以不做逐字符的双向实时同步，是因为那样会在你打字时不断重建 DOM，光标会乱跳。切换即同步，两边都不会丢改动。

从 Word 粘贴为什么要清理

Word 和 WPS 复制出来的 HTML 里塞满了 mso- 开头的私有 CSS、<o:p> <w:WordDocument> 这类命名空间标签、<!--[if gte mso 9]> 条件注释，以及十几层只为记录字体的空 span。直接贴进 CMS 后台，轻则字号字体和站点样式打架，重则整段排版塌掉。本页默认在粘贴时就把这些剥掉，只留下结构性的标签。

清理是怎么做的

不是用正则去匹配标签——那对嵌套和属性里的尖括号很容易出错。这里先把内容交给浏览器自己的 HTML 解析器建成 DOM，再递归遍历节点：命名空间标签、script、style 整个删掉；font 和不在白名单里的标签「拆掉外壳、保留内容」；属性按标签逐个过白名单。所以就算原文的标签没闭合，浏览器纠错之后出来的结构仍然是合法的。

什么算「空标签」

里面只有空白、  或零宽字符的标签算空，会被去掉。但 <p><br></p> 不算——可视化编辑里每一个空行都是这个形状，把它删掉会让你手敲的空行全部消失。表格的 td、th 即使是空的也保留，否则表格结构会塌。

有几件事是无论如何都会做的

不管清理选项怎么勾，on* 事件属性（onclick、onerror 等）、javascript: 开头的链接、<script> 与 <style> 块都会被去掉。这三样是富文本内容里最常见的 XSS 载体，留着它们的编辑器不该拿来处理别人发来的内容。

「只保留常用标签」会留下什么

段落与换行、六级标题、加粗斜体下划线删除线、有序无序列表、引用、代码、链接、图片、分割线、表格、上下标。其余标签（div、section、font、自定义组件等）会被拆掉外壳但保留里面的文字。不勾这一项时只清理属性，标签结构原样保留。

美化与压缩

美化按块级标签换行缩进，pre 和 code 里的空白原样保留——那里面的空格是有意义的。压缩会去掉标签之间的换行与缩进，但块级标签之间保留一个必要的边界，不会把 </p><p> 之间的语义粘坏。两个操作都只改源码的排版，渲染结果不变。

相关工具

HTML 格式化、HTML 标签检测、HTML 转 Markdown、HTML 转义。