所见即所得 HTML 编辑器
在浏览器里像写文档一样编辑富文本，工具栏支持加粗、斜体、删除线、行内代码、标题、列表、引用、代码块与撤销重做，并可随时查看、复制生成的 HTML 源码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
编辑区
先选中文字，再点工具栏按钮；所有操作都在本地完成。
UniKit 富文本编辑器
直接在这里输入内容，选中文字后可以用工具栏设置 加粗、斜体、删除线 或 行内代码。
所有内容都留在浏览器里，不会上传到任何服务器。
- 标题支持 H1 到 H4
- 支持有序列表、无序列表与代码块
- 可以随时复制生成的 HTML 源码
HTML 源码
<h2>UniKit 富文本编辑器</h2><p>直接在这里输入内容，选中文字后可以用工具栏设置 <strong>加粗</strong>、<em>斜体</em>、<s>删除线</s> 或 <code>行内代码</code>。</p><blockquote><p>所有内容都留在浏览器里，不会上传到任何服务器。</p></blockquote><ul><li>标题支持 H1 到 H4</li><li>支持有序列表、无序列表与代码块</li><li>可以随时复制生成的 HTML 源码</li></ul>
文档统计
这个工具能做什么
- 写邮件、Markdown 或问卷时想要加粗、列表、标题这些格式，又不想手写 HTML 标签，直接在这里排版后复制源码。
- 把一段现成的富文本（比如网页上复制的内容）粘进编辑区，清掉原来乱七八糟的样式再重新整理。
- 准备要嵌进 CMS 或邮件模板的 HTML 片段，编辑完直接复制「HTML 源码」标签页的内容。
- 估算排版后的篇幅：文档统计会给出词数、字符数（含 / 不含空格）与块级元素数量。
示例
输入
<h2>UniKit editor</h2><p>Hello <strong>world</strong> & more</p>
输出
UniKit editor Hello world & more
编辑器的「纯文本」标签页会去掉标签、解码实体，并把块级元素之间补成空格，块级元素数量记为 2。这里的 input 写成 HTML 只是为了让示例可读——真实操作是在 contenteditable 编辑区里输入，工具再反过来输出 HTML。
常见问题
内容会被上传到服务器吗？
不会。编辑器基于浏览器的 contenteditable 与 document.execCommand，全部处理都在本地内存里完成，页面不发送任何请求，也不保存你的草稿。刷新页面内容就没了，重要内容请先复制 HTML 源码。
工具栏点了没反应是怎么回事？
大多数命令（加粗、斜体、标题、列表）需要先选中文字，光标没有选中任何内容时它们会作用在接下来输入的字符上，看起来就像没生效。另外「行内代码」是插入一对 <code> 标签，属于插入操作，同样需要先选中文字。
复制的 HTML 直接放到网站上安全吗？
编辑器只生成格式化标签，不会主动插入脚本；但如果你从别处粘贴带 <script>、on* 事件或 javascript: 链接的内容，工具会给出高风险提示。放进生产页面前请仍然按不可信内容处理，服务端做转义或走白名单过滤。
为什么纯文本里的换行没有了？
纯文本视图把块级标签之间的内容用空格连接，方便做字数统计和复制成一段话。想保留段落结构请直接使用「HTML 源码」视图。
支持 H1 到 H6 吗？
工具栏提供 H1–H4 四档标题（formatBlock 到 H1/H2/H3/H4），引用和代码块分别对应 <blockquote> 与 <pre>。需要更深的标题层级就复制源码手动调整。
关键词：wysiwyg所见即所得富文本html editorcontenteditable文档编辑编辑器rich text