让 <pre> 标签可编辑：简单高效的 HTML 解决方案

在网页开发中，我们经常需要展示预格式化的文本，例如代码片段。HTML 的 <pre> 标签非常适合此用途，它能够保留文本中的空格和换行，呈现原始格式。但有时，我们需要让这些预格式化文本可编辑。

今天，我们就来分享一个简单高效的解决方案，让你的 <pre> 标签可编辑，无需任何 JavaScript 辅助。

核心技巧：contenteditable 属性

只需要在 <pre> 标签中添加 contenteditable="true" 属性，即可实现文本编辑功能。

<pre contenteditable="true">这是一个可编辑的预格式化文本。 你可以直接在这里编辑内容。</pre>

优势：

  • 直接编辑： 用户可以直接在 <pre> 标签内修改文本内容。
  • 保留预格式化： 空格和换行等预格式化特性依然保留，不会被意外改变。
  • 纯 HTML 实现： 无需任何 JavaScript 代码，简单易行。