本文介绍如何通过 JavaScript 实现将一个 contenteditable 的 <blockquote> 中的完整 HTML 内容（含格式、标签和文本）一键复制到另一个 <blockquote>，并绑定到提交按钮上，适用于富文本内容迁移场景。

本文介绍如何通过 javascript 实现将一个 contenteditable 的 `

` 中的完整 html 内容（含格式、标签和文本）一键复制到另一个 `

`，并绑定到提交按钮上，适用于富文本内容迁移场景。

在 Web 开发中，<blockquote contenteditable="true"> 常被用作轻量级富文本编辑区域。若需实现“从区块 1 复制全部内容（包括 <p>、样式标签、嵌套元素等）到区块 2”，直接操作 textContent 会丢失 HTML 结构，而 innerHTML 则能完整保留格式与语义。

以下是完整、可运行的实现方案：

✅ HTML 结构（注意：ID 避免纯数字，推荐使用语义化命名）

<blockquote contenteditable="true" id="quote-source">
  <p>这是<strong>第一段</strong>带格式的内容。</p>
  <ul><li>项目一</li><li>项目二</li></ul>
</blockquote>

<blockquote contenteditable="true" id="quote-target">
  <p>目标区块（初始内容将被覆盖）</p>
</blockquote>

<button type="submit" id="copy-btn">→ 复制到目标区块</button>

✅ JavaScript 逻辑（推荐放在 </body> 前或 DOMContentLoaded 中）

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

document.getElementById('copy-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为（避免页面刷新）

  const source = document.getElementById('quote-source');
  const target = document.getElementById('quote-target');

  if (source && target) {
    target.innerHTML = source.innerHTML;
  } else {
    console.warn('源区块或目标区块未找到，请检查 ID 是否正确');
  }
});

⚠️ 重要注意事项

• ID 命名规范：HTML 标准规定 ID 不应以纯数字开头（如 id="1"），虽部分浏览器兼容，但存在解析风险。务必使用字母开头的 ID（如 quote-source）。
• 安全性提示：innerHTML 直接写入可能执行内联脚本（如 <script>alert(1)</script>）。若内容来自不可信用户，应先进行 HTML 清洗（例如使用 DOMPurify.sanitize()）。
• 空内容处理：若源区块为空（仅 <p><br></p>），复制后目标区块也会清空——这是预期行为；如需保留占位符，可在赋值前添加判断逻辑。
• 聚焦体验优化：复制后可自动聚焦目标区块，提升操作连贯性：target.focus();

? 进阶建议

• 添加「撤销」功能：用 history.pushState() 或记录快照实现简易回退；
• 支持双向同步：为按钮增加 data-direction="source-to-target" 属性，扩展为多区块调度器；
• 结合 input 事件监听实时预览差异，提升可视化反馈。

该方案简洁可靠，兼顾语义、兼容性与可维护性，是 contenteditable 场景下内容迁移的基础实践。