CMS编辑器默认过滤标签因其不在HTML白名单内，需在TinyMCE中配置valid_elements放行、启用codesample插件并配合使用。

标签在 CMS 文章编辑器里默认常被过滤或转义，直接粘贴代码会显示为普通文本、丢失缩进，甚至触发 XSS 过滤——这不是你写错了，是编辑器在“保护”你。

为什么 CMS 编辑器里 不生效

CMS（如 WordPress、DedeCMS、PageAdmin）的富文本编辑器（TinyMCE、Ueditor、KindEditor 等）默认不信任用户输入的 HTML 标签， 属于“非白名单标签”，常被后台 PHP 或 JS 清洗逻辑直接剥离或转义成 。

• WordPress 经典编辑器 + wp_kses_post() 过滤后， 会被干掉，只留内容
• TinyMCE 默认 plugins 不含 codesample，也不允许 直接输入，除非显式配置 valid_elements
• 部分国产 CMS（如 PageAdmin）模板引擎解析时，把 当作未闭合标签处理，导致后续 HTML 结构错乱

在 TinyMCE 中启用 的实操配置

如果你用的是 TinyMCE（常见于自建 CMS 或 WordPress 插件），必须手动放行并提供渲染支持：

• 在 tinymce.init() 配置中加入：valid_elements: "+*[*],code[lang|class|data-lang]"（加号表示允许该标签，* 表示通配属性）
• 启用 codesample 插件：确保 plugins: "codesample"，并引入 Prism.js 或 Highlight.js
• 工具栏加按钮：toolbar: "codesample"，否则用户找不到入口
• 注意： 单独用效果差，推荐配合
  —— 实际应输出

  <code class="js">...</code>>

WordPress 用户绕过编辑器限制的替代方案

不改 TinyMCE 配置？有更稳的路径：

• 切换到“文本”模式（不是“可视化”），手动输入

  <code>console.log(1);</code>

  ，保存前确认没被自动包裹
  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
• 用官方 Code Block 区块（Gutenberg）：它生成的是

  <code></code>，且自带语法高亮和语言选择

• 禁用自动段落转换：在主题 functions.php 加 remove_filter('the_content', 'wpautop');，否则
  内部可能被塞进

• 避免用插件“强制保留 HTML”——很多所谓“HTML 保留插件”只是前端 JS 替换，后端入库仍是被清洗过的

关键细节：别只盯着 ，要管住它的父容器

即使 本身没被过滤，如果它被塞进

里（比如编辑器自动补全），浏览器会按 HTML 规范将其“提升”出段落，破坏结构；而

是唯一能天然保留换行与空格的合法容器。

所以真正要配的不是 ，而是整个

<code></code> 组合的白名单、样式注入点、以及后端存储时的上下文隔离。漏掉 <code><pre class="brush:php;toolbar:false;">

， 就只是个没呼吸权的标签。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！