0

0

html语句的应用_新版编辑器支持html语句变化【详解】

星夢妙者

星夢妙者

发布时间:2026-02-06 14:40:49

|

860人浏览过

|

来源于php中文网

原创

新版编辑器HTML支持基于白名单和运行时过滤,禁用script、iframe、onerror等危险标签与属性;仅允许语义安全标签如b、i、ul、table等,div和span需后端显式开启;class须预配置且受CSS支持限制,style基本被全禁;所有执行性代码在提交前被sanitizer强制移除。

html语句的应用_新版编辑器支持html语句变化【详解】

新版编辑器对 HTML 的支持不是“全放开”,而是有明确白名单和运行时过滤机制——直接写 或内联 onerror 事件会被静默剥离,不是失效,是压根不会进入 DOM。

哪些 HTML 标签能用?看编辑器的白名单配置

新版编辑器通常基于类似 DOMPurify 的净化逻辑,默认只保留语义安全的标签。常见可用标签包括:

    • 。但注意:
      是否允许,取决于后端是否在白名单中显式开启——很多部署默认禁用它们以防止样式逃逸。
      •  写代码块时,必须成对闭合,且中间不能混入未转义的 >,否则整段被截断
      • 中禁止出现 style="width:100%" 这类内联样式,宽度需靠 class 控制(如果编辑器支持 class 白名单)
      • html语句的应用_新版编辑器支持html语句变化【详解】 只允许 srcalt 属性,onloaddata-src 等一概被删
      • class 和 style 怎么生效?得看后端策略

        不是所有 class 都有效。class="highlight" 能否起作用,取决于两个条件:前端 CSS 是否定义了该类,且后端净化器是否允许该 class 名通过。多数生产环境只放行有限几个 class,如 ql-align-center(Quill 衍生编辑器常用)、language-javascript(用于代码高亮)。style 属性则基本被全禁——即使写了 style="color:red",也会在保存前被移除。

        • 想加颜色或字体大小?改用语义化标签: → 改写为 (如果编辑器仍支持 )或依赖编辑器内置 toolbar 按钮
        • 自定义 class 必须提前在编辑器初始化时通过 allowedClasses 配置项声明,否则 runtime 会过滤掉
        • 某些编辑器(如 TipTap)用 ProseMirror 底层,class 是通过 NodeSpec 的 addAttributes 显式注册的,硬写无效

        为什么

        这不是 bug,是强制安全策略。新版编辑器在内容提交前会调用 HTML sanitizer(例如 DOMPurify.withConfig),自动移除所有含执行能力的节点和属性。你看到的“没反应”,其实是内容还没发出去就被切掉了。

        ThinkAny
        ThinkAny

        一个RAG驱动的AI搜索引擎,由独立开发者idoubi开发

        下载

        立即学习前端免费学习笔记(深入)”;

        • → 整个 script 标签连同内容被删除
        • onclick 属性被删,只剩
        • 链接href 值被重写为 #,防止 JS 执行
        • 想实现交互?必须走编辑器插件机制,比如注册自定义 node 或用 data 属性配合外部 JS 监听(前提是该 data 属性在白名单里)

        真正容易被忽略的是:HTML 输入后的实时预览和最终渲染可能走两套解析流程——编辑器内部用 Quill/ProseMirror 渲染,而详情页可能用服务端 Markdown 转 HTML + 净化,导致同一段 HTML 在两边表现不一致。上线前务必在发布态下实测,别只信编辑器里的“所见即所得”。

    • 热门AI工具

      更多
      DeepSeek
      DeepSeek

      幻方量化公司旗下的开源大模型平台

      豆包大模型
      豆包大模型

      字节跳动自主研发的一系列大型语言模型

      通义千问
      通义千问

      阿里巴巴推出的全能AI助手

      腾讯元宝
      腾讯元宝

      腾讯混元平台推出的AI助手

      文心一言
      文心一言

      文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

      讯飞写作
      讯飞写作

      基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

      即梦AI
      即梦AI

      一站式AI创作平台,免费AI图片和视频生成。

      ChatGPT
      ChatGPT

      最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

      相关专题

      更多
      class在c语言中的意思
      class在c语言中的意思

      在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

      534

      2024.01.03

      python中class的含义
      python中class的含义

      本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

      17

      2025.12.06

      js正则表达式
      js正则表达式

      php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

      516

      2023.06.20

      js获取当前时间
      js获取当前时间

      JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

      307

      2023.07.28

      js 字符串转数组
      js 字符串转数组

      js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

      402

      2023.08.03

      js是什么意思
      js是什么意思

      JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

      5468

      2023.08.17

      js删除节点的方法
      js删除节点的方法

      js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

      483

      2023.09.01

      js截取字符串的方法
      js截取字符串的方法

      js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

      213

      2023.09.04

      1688阿里巴巴货源平台入口与批发采购指南
      1688阿里巴巴货源平台入口与批发采购指南

      本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

      33

      2026.02.06

      热门下载

      更多
      网站特效
      /
      网站源码
      /
      网站素材
      /
      前端模板

      精品课程

      更多
      相关推荐
      /
      热门推荐
      /
      最新课程
      Sass 教程
      Sass 教程

      共14课时 | 0.8万人学习

      Bootstrap 5教程
      Bootstrap 5教程

      共46课时 | 3.2万人学习

      CSS教程
      CSS教程

      共754课时 | 28万人学习

      关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
      php中文网:公益在线php培训,帮助PHP学习者快速成长!
      关注服务号 技术交流群
      PHP中文网订阅号
      每天精选资源文章推送

      Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号