document.designMode="on"在现代页面中常失效，因其仅对iframe内文档有效、受CSP限制、需DOMContentLoaded后设置且Safari支持弱；推荐用contenteditable替代。
document.designMode 设为 "on" 后，整个 HTML 文档会变成可编辑区域——但这不是富文本编辑器，它只是浏览器原生的、极其基础的编辑能力，不带工具栏、不自动处理样式、不兼容现代内容安全策略（CSP），且在多数现代框架中已被弃用或限制。
为什么 document.designMode = "on" 在现代页面里经常失效
根本原因不是代码写错了，而是浏览器策略和页面结构导致的“静默失败”：
-
designMode只对<iframe>内的文档生效（主文档在 Chrome/Firefox 中已基本不可用），直接设在顶层document上多数情况无反应 - 若页面启用了
Content-Security-Policy（比如 Next.js、Vite 默认带的 CSP），designMode会被直接禁用，控制台通常不报错，只默默忽略 - 必须在文档加载完成（
DOMContentLoaded或load）之后设置，否则document尚未就绪 - 某些浏览器（如 Safari）对
designMode的支持更弱，甚至完全忽略
正确启用方式：必须用 iframe + 子文档
唯一稳定可用的路径是创建一个空 <iframe>，获取其 contentDocument，再设 designMode = "on"：
<iframe id="editor" width="100%" height="400"></iframe>
<script>
const iframe = document.getElementById('editor');
iframe.addEventListener('load', () => {
const doc = iframe.contentDocument;
doc.open();
doc.write('<body contenteditable="true"><p>开始编辑</p></body>');
doc.close();
doc.designMode = 'on'; // ✅ 此时才真正生效
});
</script>
注意：doc.write() 后必须调用 doc.close()，否则 designMode 设置可能被丢弃；不要用 innerHTML 替代，它不会触发文档就绪状态。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
contenteditable 是更现实的替代方案
如果你只是想让某块区域可编辑（比如一个 <div>），contenteditable="true" 更可靠、更可控、兼容性更好：
- 支持所有主流浏览器，包括移动端 WebView
- 可配合
execCommand（虽已废弃但仍广泛可用）做粗粒度格式操作，如document.execCommand('bold') - 能监听
input、blur等事件，便于保存或校验 - 不会受 CSP 的
script-src影响（designMode会）
示例：
<div id="editable" contenteditable="true" style="border:1px solid #ccc; min-height:200px;">
<p>双击编辑我</p>
</div>
<script>
document.getElementById('editable').addEventListener('input', () => {
console.log('当前 HTML:', this.innerHTML);
});
</script>
别指望 designMode 做真正的编辑器
它没有 undo 栈、不管理光标位置跨标签行为、不处理粘贴富文本的清洗逻辑、无法阻止用户误删 <script> 标签——这些都得自己补。现在所有成熟编辑器（Quill、Tiptap、Slate）都基于 contenteditable + 自研状态管理，而不是 designMode。如果你看到某篇教程说“一行代码开启整页编辑”，那它大概率没跑通 Safari 或生产环境的 CSP。
