HTML: 允许内容可编辑在 DOM 修改后撤销

在本文中，我们将介绍如何在 HTML 中使用 contenteditable 属性实现对内容的可编辑性，并在 DOM 修改后进行撤销操作。

阅读更多：HTML 教程

什么是 contenteditable 属性？

contenteditable 是一个 HTML 属性，用于指定一个 HTML 元素是否可编辑。通过将 contenteditable 属性设置为 true，可以允许用户对元素中的内容进行编辑。

以下是使用 contenteditable 属性的一些例子：

<!-- 允许用户编辑一个段落 -->
<p contenteditable="true">这是可以编辑的内容。</p>

<!-- 允许用户编辑一个标题 -->
<h1 contenteditable="true">可编辑的标题</h1>

<!-- 允许用户编辑一个列表 -->
<ul contenteditable="true">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

使用 contenteditable 属性进行 DOM 修改

contenteditable 属性不仅可以让用户编辑元素的内容，还可以通过 JavaScript 进行 DOM 修改。下面的示例演示了如何使用 contenteditable 属性和 DOM 操作来动态修改一个列表：

<!-- 初始列表 -->
<ul id="myList" contenteditable="true">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<button onclick="addListItem()">添加项目</button>

<script>
function addListItem() {
  // 创建新的列表项
  var newItem = document.createElement("li");
  newItem.textContent = "新项目";

  // 获取列表元素
  var list = document.getElementById("myList");

  // 添加新的列表项
  list.appendChild(newItem);
}
</script>

在上面的示例中，我们给列表元素添加了 contenteditable 属性，并在 JavaScript 函数 addListItem() 中动态添加了一个新的列表项。通过这种方式，我们可以在 DOM 修改后实现内容可编辑的撤销操作。

撤销操作的实现

要实现撤销操作，我们可以使用浏览器提供的内置命令 document.execCommand()。该方法可以执行与浏览器编辑功能相关的命令，包括撤销和重做。

以下是一个使用 document.execCommand() 实现撤销操作的示例：

<!-- 允许用户编辑一个段落 -->
<p contenteditable="true" id="myPara">这是可以编辑的内容。</p>

<button onclick="undo()">撤销</button>

<script>
function undo() {
  // 执行撤销命令
  document.execCommand("undo");
}
</script>