让 HTML `<pre>` 标签可编辑

解锁 HTML <pre> 标签的编辑功能

在网页开发中，我们经常使用 <pre> 标签来展示预格式化的文本，例如代码片段。但有时候，我们需要让这些预格式化文本可编辑。本文将介绍一种简单高效的方法，让你的 HTML <pre> 标签变得可编辑。

使用 contenteditable 属性

想要实现 <pre> 标签的可编辑性，我们可以利用 HTML 的 contenteditable 属性。只需在 <pre> 标签中添加 contenteditable="true" 属性即可。

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

优势：

• 用户可以直接在 <pre> 标签内编辑文本。
• 保留了 <pre> 标签的预格式化特性，如空格和换行符。
• 纯 HTML 实现，无需 JavaScript。