使用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 = ‘auto’;
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 等专业库。不过理解原生实现有助于更好地掌控编辑行为。
以上就是HTML5网页如何实现文本编辑器 HTML5网页富文本编辑的功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588339.html
微信扫一扫 
支付宝扫一扫 
