HTML处理富文本编辑与显示主要有原生属性支持和第三方方案两类，原生方案无需引入额外依赖，适配大多数基础场景，是很多轻量需求的首选实现方式。
一、使用contenteditable属性实现富文本编辑
HTML的contenteditable属性可以让任意元素变为可编辑状态，是最简单的富文本编辑实现方式。该属性可以设置在普通div、p等元素上，用户可以直接在元素内输入内容，同时支持加粗、斜体等基础格式操作。
基础使用示例
给普通div添加contenteditable="true"属性即可开启编辑功能：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>contenteditable富文本示例</title>
<style>
.rich-editor {
width: 600px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="rich-editor" contenteditable="true">
在这里输入富文本内容，支持选中文字后使用快捷键操作格式
</div>
</body>
</html>
格式操作方法
可以通过document.execCommand方法操作选中内容的格式，不过该方法已被部分现代浏览器标记为废弃，但仍可兼容多数场景：
// 加粗选中内容
function boldText() {
document.execCommand('bold', false, null);
}
// 斜体选中内容
function italicText() {
document.execCommand('italic', false, null);
}
// 插入链接
function insertLink() {
const url = prompt('请输入链接地址', 'https://ipipp.com');
if (url) {
document.execCommand('createLink', false, url);
}
}
二、使用iframe搭建独立富文本编辑环境
如果需要更独立的编辑环境，避免页面样式影响编辑内容，可以使用iframe实现富文本编辑。核心思路是将iframe的designMode设置为on，让iframe内部的文档变为可编辑状态。
实现步骤
- 创建iframe元素，等待其加载完成
- 获取iframe的contentDocument对象
- 设置contentDocument的designMode为on
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>iframe富文本示例</title>
<style>
.editor-iframe {
width: 600px;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<iframe id="richIframe" class="editor-iframe"></iframe>
<script>
const iframe = document.getElementById('richIframe');
iframe.onload = function() {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 设置iframe文档为可编辑模式
iframeDoc.designMode = 'on';
// 设置iframe内默认内容
iframeDoc.body.innerHTML = 'iframe内的富文本编辑区域';
};
</script>
</body>
</html>
三、富文本内容的存储与显示
富文本内容通常包含HTML标签，存储时可以直接保存HTML字符串，显示时直接将存储的内容赋值给可编辑元素或展示元素的innerHTML即可。但需要注意内容安全过滤，避免XSS攻击。
内容获取与存储
对于contenteditable元素，直接获取其innerHTML即可拿到富文本内容：
// 获取富文本内容
function getRichContent() {
const editor = document.querySelector('.rich-editor');
const content = editor.innerHTML;
// 这里可以将content存储到后端
console.log('富文本内容：', content);
return content;
}
内容安全过滤
存储和显示前需要过滤危险标签和属性，比如script标签、onclick等事件属性，避免恶意代码执行。可以简单过滤常见危险内容：
// 简单过滤危险内容
function filterRichContent(content) {
// 移除script标签
let filtered = content.replace(/<script[^>]*>.*?</script>/gi, '');
// 移除所有on开头的事件属性
filtered = filtered.replace(/s+onw+s*=s*["'][^"']*["']/gi, '');
return filtered;
}
四、两种方案对比
两种原生富文本实现方案各有适用场景，具体差异如下：
| 对比项 | contenteditable方案 | iframe方案 |
|---|---|---|
| 实现复杂度 | 低，直接加属性即可 | 中等，需要处理iframe加载逻辑 |
| 样式隔离性 | 差，会继承页面样式 | 好，独立文档环境 |
| 兼容性 | 好，所有现代浏览器支持 | 好，所有现代浏览器支持 |
| 适用场景 | 轻量编辑需求，不需要严格样式隔离 | 需要独立编辑环境，避免样式干扰 |
五、注意事项
- 富文本内容存储时尽量使用HTML字符串，不要用纯文本，否则会丢失所有格式
- 显示富文本内容时，如果不是可信来源，一定要做安全过滤，避免XSS攻击
document.execCommand方法虽然兼容性好，但已被标记为废弃，复杂场景建议使用成熟的第三方富文本库- 不同浏览器对富文本格式的处理可能有差异，需要测试主流浏览器的表现
HTML富文本编辑contenteditableiframerich_text修改时间：2026-06-10 01:21:35