需借助HTML原生属性或第三方库实现富文本编辑与安全显示：一、用contenteditable+execCommand实现基础编辑；二、用iframe+designMode创建隔离编辑环境；三、用TinyMCE等成熟编辑器提升体验；四、通过服务端净化与客户端DOM解析防范XSS；五、结合文件上传接口处理图片嵌入。
如果您需要在网页中实现富文本的编辑与显示功能，则需借助HTML原生支持或第三方库来完成内容的格式化输入与安全渲染。以下是处理富文本编辑与显示的具体方法：
一、使用contenteditable属性实现基础富文本编辑
contenteditable是HTML5原生属性，可使任意元素变为可编辑区域，并支持基本格式操作（如加粗、斜体、列表等），无需引入外部脚本即可启用编辑能力。
1、在HTML中定义一个具有contenteditable属性的
2、为该元素绑定JavaScript事件监听器，捕获用户执行的命令（如document.execCommand）。
立即学习“前端免费学习笔记（深入）”；
3、添加工具栏按钮，点击时调用document.execCommand方法，传入对应命令名与参数，例如：document.execCommand('bold', false, null)用于加粗选中文本。
4、通过getSelection()和range对象控制光标位置与内容插入点，确保格式操作精准作用于选区。
二、使用iframe配合designMode实现独立编辑环境
iframe结合designMode可创建隔离的富文本编辑上下文，避免样式污染主页面，且兼容性优于contenteditable在部分旧浏览器中的表现。
1、在HTML中嵌入一个空的
2、获取iframe的document对象，在其加载完成后执行iframe.contentDocument.designMode = 'on'以启用编辑模式。
3、向iframe内注入初始HTML结构（如
），作为编辑起始内容。4、通过父页面脚本调用iframe.contentDocument.execCommand执行格式指令，所有编辑行为均发生在iframe内部文档中。
三、使用第三方富文本编辑器（如TinyMCE、Quill、CKEditor）
成熟编辑器封装了复杂的DOM操作、跨浏览器兼容处理、插件扩展机制及安全过滤逻辑，适合对编辑体验与内容可靠性要求较高的场景。
1、通过CDN引入编辑器核心脚本，例如加载Quill的JS与CSS资源链接。
2、在页面中声明一个容器元素，如。
3、初始化编辑器实例，指定容器ID与配置项，例如启用字体、颜色、图片上传等功能模块。
4、通过API获取HTML内容（如quill.root.innerHTML）或Delta格式数据，用于后续存储或传输。
四、安全显示富文本内容（防止XSS攻击）
直接将用户提交的富文本HTML插入页面存在严重安全风险，必须进行内容清洗与白名单过滤，仅保留可信标签与属性。
1、服务端使用专用HTML净化库（如Python的bleach、Node.js的sanitize-html）对HTML字符串进行解析与重建。
2、设定白名单标签（如p、strong、em、ul、ol、li、br）与白名单属性（如class、style中限定的font-size、color等）。
3、客户端若需前端渲染，应避免使用innerHTML赋值，改用DOMParser解析后遍历节点，逐个验证并重建安全DOM结构。
4、对style属性中的CSS值做正则校验，禁止url()、expression()、javascript:等危险函数调用，例如过滤掉style="background:url(javascript:alert(1))"类恶意代码。
五、处理富文本中的图片与文件上传
富文本常需嵌入图片或其他媒体资源，需结合文件上传接口与URL替换机制，确保内容可持久化且加载可靠。
1、监听编辑器内的图片粘贴或文件拖入事件，捕获File对象或DataTransfer数据。
2、使用FormData构造上传请求，将文件发送至后端接口，例如POST到/api/upload/image。
3、接收服务器返回的成功响应，提取图片URL字段（如{ "url": "https://cdn.example.com/img/abc.png" }）。
4、在编辑器当前光标位置插入标签，其src属性设为返回的URL，并添加alt与loading="lazy"等必要属性。
