创建内联编辑器需要付出努力。首先使用 input 或 textarea 字段切换要编辑的元素。为了获得无缝的用户体验，您可能还需要使用一些 CSS 以使交换元素的样式与原始元素相匹配。用户完成编辑后，将所有内容复制到原始内容后，您将不得不再次切换元素。
contentEditable 属性使此任务变得更加容易。您所要做的就是将此属性设置为 true，标准 HTML5 元素将变得可编辑。在本教程中，我们将基于此功能创建一个内联富文本编辑器。
该属性可以采用三个有效值。它们是 true、false 和 继承 。值 true 表示该元素是可编辑的。空字符串也将计算为 true。 false 表示该元素不可编辑。值 inherit 是默认值。 inherit 指示如果元素的直接父元素可编辑，则该元素将可编辑。这意味着，如果您使元素可编辑，则其所有子元素（不仅仅是直接元素）也将变得可编辑，除非您显式将其 contentEditable 属性设置为 false。< /p>
您可以使用 JavaScript 动态更改这些值。如果新值不是三个有效值中的任何一个，则会抛出 SyntaxError 异常。
要创建内联编辑器，您需要能够在用户决定编辑某些内容时更改 contentEditable 属性的值。
在切换 contentEditable 属性时，有必要知道该属性当前拥有什么值。为此，您可以使用 isContentEditable 属性。如果 isContentEditable 对于某个元素返回 true ，则该元素当前可编辑，否则不可编辑。我们很快就会使用这个属性来确定文档中各种元素的状态。
首先，我们需要创建一个名为contenteditable-editor的目录。在其中创建一个名为 index.html 的新文件。您可以将其用作 HTML 文件的骨架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Editor</title>
</head>
<body></body>
</html>
构建编辑器的第一步是创建一个用于切换编辑和一些可编辑元素的按钮。在 元素内，输入：
<button id="editBtn" type="button">Edit Document</button>
<div id="editor">
<h1 id="title">A Nice Heading.</h1>
<p>Last Edited By - <span id="author">Monty Shokeen</span></p>
<p id="content">Some content that needs correction.</p>
</div>
我们打算保持可编辑的每个元素都需要有自己唯一的 Id。当我们必须保存更改或稍后检索它们以替换每个元素内的文本时，这将很有帮助。
以下 JavaScript 代码处理所有编辑和保存。
const editBtn = document.getElementById('editBtn');
const editables = document.querySelectorAll('#title, #author, #content')
editBtn.addEventListener('click', function(e) {
if (!editables[0].isContentEditable) {
editables[0].contentEditable = 'true';
editables[1].contentEditable = 'true';
editables[2].contentEditable = 'true';
editBtn.innerHTML = 'Save Changes';
editBtn.style.backgroundColor = '#6F9';
} else {
// Disable Editing
editables[0].contentEditable = 'false';
editables[1].contentEditable = 'false';
editables[2].contentEditable = 'false';
// Change Button Text and Color
editBtn.innerHTML = 'Enable Editing';
editBtn.style.backgroundColor = '#F96';
// Save the data in localStorage
for (var i = 0; i < editables.length; i++) {
localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
}
}
});
您可以将此代码放在