HTML5网页如何实现文本编辑器 HTML5网页富文本编辑的功能
使用contenteditable属性使HTML元素可编辑，配合JavaScript的execCommand或DOM操作实现加粗、斜体、插入图片等格式化功能；2. 通过innerHTML获取内容并用localStorage保存，支持编辑内容持久化；3. 原生方案适合简单场景，复杂需求推荐使用Quill、TinyMCE等专业编辑器库。
HTML5 提供了原生支持富文本编辑的功能，通过 contenteditable 属性和 Document.execCommand()（已废弃但仍广泛使用）或现代的 execCommand 替代方案，可以快速实现一个基础的网页文本编辑器。
1. 使用 contenteditable 启用编辑功能
给任意 HTML 元素添加 contenteditable="true" 属性，用户就可以直接在页面上编辑内容。
在这里输入内容...
这个 div 现在就是一个可编辑区域，支持文字输入、换行、格式粘贴等基本操作。
2. 添加常用编辑按钮（加粗、斜体、标题等）
通过 JavaScript 调用命令来格式化选中的文本。虽然 document.execCommand() 已被标记为过时，但在大多数浏览器中仍然可用。
示例：创建工具栏按钮
对应的 JavaScript 函数：
function execCmd(command) {document.execCommand(command, false, null);
}
// 设置标题可通过 insertHTML 模拟
function setHeading() {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const heading = document.createElement('h1');
heading.appendChild(range.extractContents());
range.insertNode(heading);
}
}
3. 处理图片插入与对齐
插入图片可以使用 execCommand 或手动操作 DOM。
-
插入图片：
document.execCommand('insertImage', false, 'image-url.jpg'); - 设置居中： 可通过包裹元素并设置样式实现
例如：
function insertImage(url) {const img = document.createElement('img');
img.src = url;
img.style.maxWidth = '100%';
img.style.height = 'au
to';document.getElementById('editor').appendChild(img);
}
4. 获取和保存编辑内容
由于编辑内容在 div 内部，获取 HTML 内容只需读取 innerHTML。
function getContent() {return document.getElementById('editor').innerHTML;
}
function saveContent() {
localStorage.setItem('editorContent', getContent());
}
加载时恢复内容：
window.onload = function() {const saved = localStorage.getItem('editorContent');
if (saved) {
document.getElementById('editor').innerHTML = saved;
}
};
基本上就这些。用 contenteditable 配合 execCommand 能快速搭建一个轻量级富文本编辑器，适合简单场景。若需要更强大功能（如协作编辑、Markdown 支持、自定义插件），建议使用 Quill、TinyMCE 或 Slate.js 等专业库。不过理解原生实现有助于更好地掌控编辑行为。
