document.designmode="on"在现代页面中常失效，因其仅对iframe内文档有效、受csp限制、需domcontentloaded后设置且safari支持弱；推荐用contenteditable替代。

document.designMode 设为 "on" 后，整个 HTML 文档会变成可编辑区域——但这不是富文本编辑器，它只是浏览器原生的、极其基础的编辑能力，不带工具栏、不自动处理样式、不兼容现代内容安全策略（CSP），且在多数现代框架中已被弃用或限制。

为什么 document.designMode = "on" 在现代页面里经常失效

根本原因不是代码写错了，而是浏览器策略和页面结构导致的“静默失败”：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• designMode 只对 <iframe></iframe> 内的文档生效（主文档在 Chrome/Firefox 中已基本不可用），直接设在顶层 document 上多数情况无反应
• 若页面启用了 Content-Security-Policy（比如 Next.js、Vite 默认带的 CSP），designMode 会被直接禁用，控制台通常不报错，只默默忽略
• 必须在文档加载完成（DOMContentLoaded 或 load）之后设置，否则 document 尚未就绪
• 某些浏览器（如 Safari）对 designMode 的支持更弱，甚至完全忽略

正确启用方式：必须用 iframe + 子文档

唯一稳定可用的路径是创建一个空 <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>开始编辑</script>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！