WordPress纯PHP环境下CKEditor5启用HTML embed等功能求助

一、CKEditor5工具栏按钮不显示的问题 #

你用的Classic Editor CDN基础版默认不包含underline、fontFamily、fontSize、htmlEmbed这些插件——CKEditor5是模块化架构，基础构建只打包了最核心的功能。解决方法有两个：

方法1：使用预构建的全功能版本 #

替换你的CDN链接为官方Superbuild（包含绝大多数常用插件）：

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/super-build/ckeditor.js"></script>

这个版本自带你需要的所有按钮，不需要额外配置，直接沿用现有toolbar配置就能显示。

方法2：修复CK Builder自定义构建 #

之前你生成的构建无法使用，大概率是插件勾选或路径配置问题：

1. 重新用CK Builder生成构建时，务必勾选Underline、Font Family、Font Size、HTML Embed这几个插件
2. 把生成的构建文件上传到WordPress主题目录（比如/wp-content/themes/你的主题名/ckeditor/）
3. 修改引入路径为本地文件：

<script src="<?= get_template_directory_uri() ?>/ckeditor/ckeditor.js"></script>

4. 原初始化代码无需修改，只要插件包含完整，工具栏按钮就会正常显示。

二、嵌入Tableau代码不被转义的问题 #

即使htmlEmbed功能正常，WordPress的默认过滤机制仍会转义或清理代码，需要同时处理编辑器和后端过滤：

1. 配置CKEditor5允许HTML嵌入 #

在初始化代码中添加htmlEmbed的权限配置：

ClassicEditor.create(element, {
  toolbar: {
    items: ['heading', '|', 'imageUpload', 'bold', 'italic', 'underline', 'fontFamily',
    'fontSize', 'htmlEmbed', 'link','bulletedList', 'numberedList'],
    shouldNotGroupWhenFull: true
  },
  extraPlugins: [ MyCustomUploadAdapterPlugin ],
  // 开启HTML嵌入预览并允许所需标签
  htmlEmbed: {
    showPreviews: true,
    allow: [
      'iframe', 'div', 'script' // 根据Tableau代码需求添加标签，或用'*'允许所有
    ]
  }
})

2. 绕过WordPress的内容过滤 #

wp_kses配置无效，是因为WordPress会对内容进行多层过滤（比如wp_filter_post_kses、自动换行等），可以针对性禁用：

针对自定义字段（推荐）

如果Tableau代码存在自定义字段中，添加以下代码到主题functions.php：

// 替换成你的自定义字段名，比如'tableau_embed_code'
add_filter('sanitize_post_meta_tableau_embed_code', '__return_false');

// 允许Tableau所需的HTML标签
add_filter('wp_kses_allowed_html', function($allowed_html, $context) {
  if ($context === 'post') {
    $allowed_html['iframe'] = array(
      'width' => true,
      'height' => true,
      'src' => true,
      'frameborder' => true,
      'allow' => true,
      'allowfullscreen' => true
    );
    // 添加Tableau代码里的其他标签
  }
  return $allowed_html;
}, 10, 2);

针对文章内容（谨慎使用）

如果代码存在文章正文里，添加以下代码禁用全局过滤（仅在编辑者为可信用户时使用）：

// 禁用文章内容的wp_kses过滤
remove_filter('content_save_pre', 'wp_filter_post_kses');
remove_filter('content_filtered_save_pre', 'wp_filter_post_kses');

// 禁用自动换行，避免代码被添加多余<p>标签
remove_filter('the_content', 'wpautop');

3. 前台输出时直接渲染原始内容 #

在前台输出内容时，不要用the_content()，直接输出原始内容：

// 如果你用自定义字段存储：
echo get_post_meta(get_the_ID(), 'tableau_embed_code', true);

// 如果存在文章正文：
echo get_post_field('post_content', get_the_ID());

内容的提问来源于stack exchange，提问作者Ignacio Labra Garcia