无需登录 数据私有 本地保存

富文本与HTML互转 - contenteditable可视化

13
0
0
0
字符数：0 段落数：0 HTML字节：0
HTML

常见问题 & 知识点

contenteditable 是 HTML5 的一个全局属性，设置为 true 后，用户可以直接在浏览器中编辑该元素的内容。它本质上是将 DOM 元素变成一个所见即所得（WYSIWYG）的编辑器，底层通过浏览器的编辑引擎处理光标、选区、输入等操作。配合 document.execCommand() 可以执行格式化命令（如加粗、斜体），实现类似 Word 的编辑体验。

浏览器在 contenteditable 元素中执行格式化操作时，会自动修改 DOM 结构。例如加粗操作会在选中文本外包裹 <strong> 标签，创建列表会生成 <ul><li> 结构。通过读取编辑区域的 innerHTML 属性，即可获取对应的 HTML 源码。本工具使用 MutationObserver 实时监听 DOM 变化，自动将最新的 HTML 同步到源码面板。

是的，document.execCommand() 已被 W3C 标记为废弃（deprecated），但在所有主流浏览器中仍然可用且稳定。新的标准是 Input Events Level 2 和 Clipboard API，但目前尚未完全替代 execCommand 的所有功能。对于工具类应用，execCommand 仍然是实现富文本编辑最实用的方案。未来浏览器可能会逐步用新的 Editing API 替代它。

富文本内容可能包含恶意脚本（XSS攻击）。安全处理建议：
1. 使用 DOMParser 解析 HTML 并过滤危险标签（如 <script>、<iframe>）；
2. 使用成熟的 sanitizer 库，如 DOMPurify；
3. 设置 Content-Security-Policy (CSP) HTTP 头限制内联脚本执行；
4. 在服务端再次校验和清理 HTML 内容。本工具主要用于本地开发调试，建议在正式环境中对 HTML 进行 sanitize 处理。

有多种方式可以将 HTML 转为纯文本：
1. 使用 element.textContent 或 element.innerText 提取文本；
2. 创建一个临时 DOM 元素，设置其 innerHTML 后读取 textContent；
3. 在浏览器中，document.createElement('div').innerHTML = html; div.textContent 即可快速获取纯文本。注意这会丢失所有格式信息，仅保留文字内容。

MutationObserver 是浏览器提供的 API，用于监听 DOM 树的变化（包括节点增删、属性修改、文本变化等）。在本工具中，它被用来实时监控 contenteditable 编辑区的 DOM 变更——每当用户输入文字、应用格式、删除内容时，MutationObserver 会捕获这些变化并触发回调，自动将最新的 innerHTML 同步到 HTML 源码面板，实现所见即所得的实时转换。

移动端使用富文本编辑器时：
1. 工具栏适配：使用响应式布局，按钮自动换行或横向滚动；
2. 触摸优化：按钮尺寸不小于 44×44px（iOS 推荐最小触摸目标）；
3. 键盘处理：注意软键盘弹出时编辑区域的可见性，使用 scrollIntoView 确保光标可见；
4. 简化操作：移动端优先提供最常用的格式按钮（加粗、列表、链接），减少复杂操作。
🔧 相关工具