本文介绍如何通过 JavaScript 将一个 contenteditable 的 中的 HTML 内容（含格式）一键复制到另一个 ，并绑定到提交按钮上实现交互。

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

` 中的 html 内容（含格式）一键复制到另一个 `

`，并绑定到提交按钮上实现交互。

在 Web 开发中，常需实现富文本内容的跨元素传递。当两个

均设置为 contenteditable="true" 时，它们不仅支持纯文本输入，还能保留用户输入的 HTML 结构（如

、、换行
等）。此时，若使用 textContent 仅能获取纯文本，会丢失所有格式；而 innerHTML 则能完整复制带标签的结构化内容，是更优选择。

以下为完整可运行示例：

<blockquote contenteditable="true" id="1"><p>这是第一个引用块的内容</p></blockquote>
<blockquote contenteditable="true" id="2"><p>这是第二个引用块的初始内容</p></blockquote>
<button type="submit" id="sbmt">复制到目标区块</button>

<script>
  const btn = document.getElementById('sbmt');
  const sourceBlock = document.getElementById('1');
  const targetBlock = document.getElementById('2');

  btn.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止表单默认提交行为（避免页面刷新）
    targetBlock.innerHTML = sourceBlock.innerHTML;
  });
</script>

✅ 关键说明：

• ID 命名建议避免纯数字（如 "1"），虽现代浏览器支持，但不符合 HTML 规范（ID 应以字母开头）。推荐改用 id="quote-source" 和 id="quote-target" 提升可维护性；
• type="submit" 按钮在表单内会触发表单提交，务必添加 e.preventDefault() 防止意外跳转或刷新；
• 若需清空目标区块再粘贴，可先执行 targetBlock.innerHTML = ''；
• 如仅需纯文本（忽略格式），可替换为 targetBlock.textContent = sourceBlock.textContent。

该方案轻量、兼容性好（支持所有现代浏览器），适用于笔记管理、内容预览、多栏编辑等场景。