如何在Drupal 9.5.3的CKEditor 5中添加内联JS代码？

核心问题原因 #

Drupal 9（搭配CKEditor 5）默认会通过文本过滤系统移除<script>标签，这是安全防护设计，和Drupal 8的默认规则不同，所以直接在编辑器里添加JS会被过滤失效。

解决步骤 #

1. 调整文本格式的过滤规则

• 进入后台路径：/admin/config/content/formats（对应菜单：配置 > 内容创作 > 文本格式和编辑器）
• 找到你自定义区块使用的文本格式（比如「Full HTML」），点击「配置」
• 在「过滤条件」区域，找到「限制允许的HTML标签并纠正错误的HTML」，点击「配置」
• 在「允许的HTML标签」列表中添加<script>相关标签，比如添加 <script src type> 来支持内联脚本和带src的外部脚本
• 注意：如果启用了「HTML过滤器」，需确保它未移除脚本标签，或直接禁用该过滤器（仅信任所有使用该格式的用户时推荐）
• 保存配置

2. 调整CKEditor 5的编辑器配置

• 同样在文本格式配置页面，找到「编辑器」区域的「配置」按钮（对应CKEditor 5设置）
• 找到「内容过滤」相关选项，禁用或调整会移除脚本的插件（比如「限制HTML」插件），确保<script>标签被允许
• 保存编辑器配置

3. 更安全的替代方案（推荐）

直接在编辑器加脚本存在安全风险（若有非管理员可编辑区块），更稳妥的方式：

• 自定义模块引入：创建简单自定义模块，通过hook_page_attachments()方法添加JS，或用库（library）方式引入外部脚本
• 主题模板修改：复制区块默认模板（如block.html.twig）到主题目录，在模板内直接添加<script>标签，或通过主题libraries.yml引入JS文件
• 自定义代码区块：使用支持自定义代码的区块类型（需确保权限控制严格），避免直接在富文本编辑器中插入脚本

验证方法 #

修改配置后，重新编辑自定义区块，添加测试脚本（如<script>console.log('JS测试运行');</script>），保存后刷新页面，打开浏览器控制台查看是否有对应输出。

内容的提问来源于stack exchange，提问作者vjprabhakar