HTML code标签在CMS系统文章编辑器中的配置-html教程-PHP中文网

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

html code标签在cms系统文章编辑器中的配置

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

为什么 CMS 编辑器里 `<code>` 不生效

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

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

在 TinyMCE 中启用 `<code>` 的实操配置

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

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

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

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

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

切换到“文本”模式（不是“可视化”），手动输入 <pre class="brush:php;toolbar:false;"><code>console.log(1);</code></pre>，保存前确认没被自动包裹 
用官方 Code Block 区块（Gutenberg）：它生成的是 <pre class="wp-block-code"><code></code>，且自带语法高亮和语言选择</pre>
禁用自动段落转换：在主题 functions.php 加 remove_filter('the_content', 'wpautop');，否则 <pre class="brush:php;toolbar:false;"></pre> 内部可能被塞进 
避免用插件“强制保留 HTML”——很多所谓“HTML 保留插件”只是前端 JS 替换，后端入库仍是被清洗过的

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

即使 <code> 本身没被过滤，如果它被塞进  里（比如编辑器自动补全），浏览器会按 HTML 规范将其“提升”出段落，破坏结构；而 <pre class="brush:php;toolbar:false;"></pre> 是唯一能天然保留换行与空格的合法容器。

所以真正要配的不是 <code>，而是整个 <pre class="brush:php;toolbar:false;"><code></code> 组合的白名单、样式注入点、以及后端存储时的上下文隔离。漏掉 <code><pre class="brush:php;toolbar:false;"></pre>，<code> 就只是个没呼吸权的标签。