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

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

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

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

在 Web 开发中，

常被用作轻量级富文本编辑区域。若需实现“从区块 1 复制全部内容（包括

、样式标签、嵌套元素等）到区块 2”，直接操作 textContent 会丢失 HTML 结构，而 innerHTML 则能完整保留格式与语义。

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

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<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 逻辑（推荐放在

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