ckeditor 5 已完全弃用 ckeditor 全局对象及 replace() 方法，需改用基于 promise 的 create() api 并通过 htmlsupport 配置 html 元素与样式白名单。
ckeditor 5 已完全弃用 ckeditor 全局对象及 replace() 方法，需改用基于 promise 的 create() api 并通过 htmlsupport 配置 html 元素与样式白名单。
CKEditor 5 是一个彻底重构的现代富文本编辑器，与经典的 CKEditor 4 在架构、API 和配置方式上存在根本性差异。最显著的变化之一是：CKEditor 5 不再暴露全局 CKEDITOR 对象，因此调用 CKEDITOR.replace() 会直接抛出 Uncaught ReferenceError: CKEDITOR is not defined 错误——这并非加载问题，而是设计上的主动移除。
在 CKEditor 5 中，所有编辑器实例均通过模块化方式创建，主流构建（如 ClassicEditor）需显式导入并调用 .create() 方法。同时，旧版中通过 extraAllowedContent 控制 HTML 白名单的方式已被更安全、更细粒度的 htmlSupport 插件取代。
✅ 正确配置方式（支持任意 style 属性与内联样式）
以下为兼容 CKEditor 5 v38+ 的完整示例，启用通用 HTML 支持并允许所有内联样式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CKEditor 5 - HTML Support Example</title> <!-- 使用 CDN 加载 Classic Editor 构建 --> <script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/classic/ckeditor.js"></script> </head> <body> <div id="editor">This is some <strong>sample</strong> content with <span style="color:red;">inline styles</span>.</div> <script> ClassicEditor .create(document.querySelector('#editor'), { // 启用 HTML 支持插件（已包含在 classic 构建中） htmlSupport: { allow: [ { name: /.*/, // 匹配任意 HTML 标签名（正则） attributes: true, // 允许所有属性（含 class、id、rel 等） classes: true, // 显式允许 class 属性 styles: true // ✅ 关键：允许所有内联 CSS 样式（如 style="color:red;"） } ] } }) .then(editor => { console.log('Editor initialized:', editor); window.editor = editor; // 方便调试时访问 }) .catch(error => { console.error('Editor initialization failed:', error.stack); }); </script> </body> </html>⚠️ 注意事项与最佳实践
- 不要混用 CKEditor 4 与 5 的 API：CKEDITOR.replace()、CKEDITOR.config、extraAllowedContent 等均为 CKEditor 4 专属，CKEditor 5 中完全无效。
- htmlSupport 是可选插件：虽然 Classic Build 默认包含该插件，但若使用自定义构建（如通过 @ckeditor/ckeditor5-build-classic），请确保已安装并注册 HtmlSupport 插件。
- 安全性权衡：name: /.*/ + styles: true 允许任意 HTML 和内联样式，在用户可提交内容的生产环境中存在 xss 风险。建议根据实际需求精确限定：
allow: [ { name: 'span', styles: ['color', 'background-color'] }, { name: 'p', attributes: ['class'] }, { name: 'a', attributes: ['href', 'target'] } ] - 替代方案（不推荐宽泛放行）：若仅需保留部分内联样式，可结合 removePlugins 禁用 htmlSupport，改用 dataProcessor 或后端清洗，但开发复杂度显著上升。
总之，从 CKEditor 4 迁移到 5 时，必须摒弃全局对象思维，转向声明式配置与模块化实例管理。理解 htmlSupport 的作用机制，是安全、灵活地扩展 CKEditor 5 HTML 能力的关键一步。