如何在 WordPress 中彻底清理粘贴文本(包括自定义 data 属性)

如何在 WordPress 中彻底清理粘贴文本(包括自定义 data 属性)

本文介绍如何通过自定义 tinymce 的 `paste_preprocess` 钩子,在 wordpress 编辑器中实现粘贴内容的深度净化——不仅移除冗余标签与 class/id,还精准清除如 `data-uw-styling-context` 等第三方编辑器注入的污染属性。

WordPress 默认的「粘贴为纯文本」功能往往不够彻底,尤其当用户从 Word、Notion 或某些富文本编辑器(如 UltraEdit、CKEditor 衍生工具)复制内容时,HTML 中常残留大量无意义的 data-* 属性(例如 data-uw-styling-context=”true”)、内联样式、冗余嵌套或非标准标签。上述原始脚本虽已通过 jQuery 白名单机制有效剥离非法标签并清除 id 和 class,但对现代编辑器广泛使用的 data-* 属性未作处理,导致 HTML 仍不洁净。

要真正实现“所见即所得”后的语义化输出,需在原有逻辑基础上扩展属性清理范围。核心思路是:在 stripped.find(‘*’) 选中所有元素后,链式调用 .removeAttr() 清除指定的 data-* 属性

以下是增强后的完整 PHP 函数(兼容 WordPress 5.0+ 及经典编辑器):

add_filter('tiny_mce_before_init', 'configure_tinymce');

function configure_tinymce($in) {
    $in['paste_preprocess'] = "function(plugin, args){
        // 定义允许保留的 HTML 标签白名单
        var whitelist = 'p,span,b,strong,i,em,h3,h4,h5,h6,ul,li,ol,a,br,blockquote';
        var stripped = jQuery('
' + args.content + '
'); // 移除白名单外的所有标签(保留其文本内容) var els = stripped.find('*').not(whitelist); for (var i = els.length - 1; i >= 0; i--) { var e = els[i]; jQuery(e).replaceWith(e.innerHTML); } // 移除所有元素的危险/冗余属性:id、class、及常见 data-* 属性 stripped.find('*') .removeAttr('id') .removeAttr('class') .removeAttr('style') // 建议一并清除内联样式 .removeAttr('data-uw-styling-context') .removeAttr('data-mce-style') .removeAttr('data-mce-bogus') .removeAttr('data-mce-selected') .removeAttr('data-mce-placeholder'); // 可选:进一步过滤空标签(如仅含空白字符的
Figstack
Figstack

一个基于 Web 的AI代码伴侣工具,可以帮助跨不同编程语言管理和解释代码。

下载
) stripped.find('*').each(function() { if (jQuery(this).is('p,div,span') && jQuery.trim(jQuery(this).text()) === '') { jQuery(this).remove(); } }); args.content = stripped.html(); }"; return $in; }

关键改进说明:

  • 新增 .removeAttr(‘style’) —— 防止粘贴带内联样式的段落破坏主题排版;
  • 扩展 data-* 清理列表:除 data-uw-styling-context 外,一并处理 TinyMCE 自身可能插入的 data-mce-* 类属性;
  • 增加空标签清理逻辑,提升输出 HTML 的语义纯净度;
  • 白名单中补充
    ,兼顾基础链接与换行需求(可根据项目实际调整)。

⚠️ 注意事项:

  • 此方案依赖前端 jQuery(WordPress 后台默认加载),无需额外引入;
  • 若使用 Gutenberg(块编辑器),该钩子仅对经典编辑器模式生效;Gutenberg 需改用 wp_enqueue_editor + editor.BlockEdit 高阶组件拦截,或借助插件如 Paste as Plain Text
  • 生产环境建议配合后端 wp_kses_post() 进行二次过滤,形成前后端双重防护;
  • 修改后请清空浏览器缓存及 WordPress 对象缓存,确保 JS 变更即时生效。

通过这一增强型配置,您可确保用户粘贴的内容在进入数据库前已被严格标准化——既保障前端渲染一致性,又降低 XSS 潜在风险,真正实现「干净输入,可靠输出」。

https://www.php.cn/faq/2022754.html

发表回复

Your email address will not be published. Required fields are marked *