在 jQuery 项目中通过 CDN 集成 CKEditor 5 富文本编辑器-港品优选

在 jQuery 项目中通过 CDN 集成 CKEditor 5 富文本编辑器

【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5

导读

本文讲解如何在基于 jQuery 的传统网页项目中，通过官方 Cloud CDN 引入并初始化 CKEditor 5 富文本编辑器：从搭建一个加载 jQuery 的 HTML 页面开始，逐步接入编辑器所需的 CSS 与 UMD 脚本，并在 jQuery 的$( document ).ready()中完成编辑器创建，最后介绍如何扩展 CKEditor 5 Premium 付费功能（以 Format Painter 格式刷为例）。读完本文，你将掌握一套零打包器、零构建步骤的 jQuery + CKEditor 5 集成方案，并能在此基础上继续配置插件、工具栏与编辑器数据读写。

方案概览：为什么选择 CDN + jQuery

CKEditor 5 官方在 integrations-cdn 目录中提供了"从 CDN 加载"的安装渠道，它不需要 Node.js、不需要打包器，只要在页面中引入几个<link>和<script>标签即可使用。这种集成方式天然适合以下几种场景：

项目仍以 jQuery 为主力，页面以服务端渲染为主，不便引入 npm 与现代构建链；
只需要在个别页面中使用富文本编辑器，不希望为此改造整个前端工程；
希望通过官方 CDN 获得按版本锁定的编辑器资源，简化版本升级与资源维护。

CDN 方案在 jQuery 页面中的核心思路是：用 jQuery 的选择器拿到页面中的 DOM 元素，再将其作为编辑器初始化的目标元素传给 CKEditor 5，编辑器创建成功后会用自身 UI 替换（接管）该元素。

搭建一个包含 jQuery 的 HTML 页面

第一步是准备一个包含 jQuery 的 HTML 页面。jQuery 建议通过官方 CDN 引入，并且必须放在所有依赖它的自定义脚本之前，这样当页面脚本执行时$对象与相关选择器方法已经可用。

下面是一个最基础的页面骨架：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CKEditor&nbsp;5 with jQuery Integration</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> </head> <body> <div id="editor"> <p>Hello from CKEditor&nbsp;5 with jQuery!</p> </div> <script> $( document ).ready( () => { // jQuery code will go here console.log( 'jQuery is loaded and ready!' ); } ); </script> </body> </html>

其中几个值得注意的细节：

<div id="editor">是编辑器将要依附的目标元素，其内部现有内容（如<p>Hello from CKEditor 5 with jQuery!</p>）会被当作编辑器的初始内容加载；
所有初始化代码都放在$( document ).ready()回调内，确保 DOM 完全就绪后才执行；
jQuery 脚本位于<head>中、自定义脚本之前，保证自定义代码执行时 jQuery 已加载。

通过 CDN 安装 CKEditor 5

引入必需的 CSS 与 JS 资源

使用 CKEditor 5 Cloud CDN 需要先创建一个免费账户）。随后在你的页面中引入两组资源：

CSS 样式表：包含编辑器 UI 与内容展示所需的全部样式，放在<head>中；
JavaScript 脚本：包含编辑器内核与所有可用插件，需在 jQuery 之后、自定义初始化代码之前加载。

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.css" /> <script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.umd.js"></script>

其中{@var ckeditor5-version}为版本占位符，请替换为具体版本号（本仓库当前对应版本为 48.5.0）。ckeditor5.umd.js是 UMD 格式的打包文件，加载后会在全局暴露一个名为CKEDITOR的全局对象，编辑器类与所有开源插件都挂载在该对象上。

在 jQuery 就绪回调中初始化编辑器

初始化代码应放在 jQuery 的 ready 回调内，以保证 DOM 与外部资源都已就绪。通过对象解构从CKEDITOR中取出需要的编辑器类型（如ClassicEditor）与插件（如Essentials、Bold、Italic、Font、Paragraph），再调用ClassicEditor.create()。

完整集成代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CKEditor&nbsp;5 with jQuery Integration</title> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.umd.js"></script> </head> <body> <div id="editor"> <p>Hello from CKEditor&nbsp;5 with jQuery!</p> </div> <script> $( document ).ready( () => { const { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } = CKEDITOR; ClassicEditor .create( { attachTo: $( '#editor' )[ 0 ], licenseKey: '<YOUR_LICENSE_KEY>', plugins: [ Essentials, Bold, Italic, Font, Paragraph ], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor' ] } ) .then( editor => { // Editor initialized successfully. console.log( 'CKEditor&nbsp;5 initialized with jQuery!' ); } ) .catch( error => { console.error( 'Error initializing CKEditor&nbsp;5:', error ); } ); } ); </script> </body> </html>

关键配置项解读：attachTo 与 jQuery 选择器

在上述配置中，attachTo: $( '#editor' )[ 0 ]是 jQuery 与 CKEditor 5 衔接的关键点：

$( '#editor' )返回 jQuery 包装对象，通过[ 0 ]取出其中第一个原生 DOM 元素；
该原生元素通过attachTo配置传给ClassicEditor.create()，作为编辑器初始化的源元素。

从仓库源码看，这一机制在 classiceditor.ts 中实现：构造函数会从this.config.get( 'attachTo' )读取源元素，并校验该元素必须已连接至 DOM，否则抛出editor-source-element-not-attached错误；随后在create()流程中通过editor.ui.init( editor.config.get( 'attachTo' ) || null )（见 classiceditor.ts）将编辑器 UI 挂载到该元素上。对应测试（见 tests/classiceditor.js）也验证了config.attachTo与initialData组合使用的行为。

如果页面中同时传入了源元素与attachTo配置，编辑器会抛出错误提示（见 tests/classiceditor.js），因此在 jQuery 场景中只需使用attachTo一种方式即可。

其余配置项：plugins 与 toolbar

plugins：数组形式列出本次编辑器中需要启用的插件。CKEditor 5 的所有功能都由插件实现，按需引入可以减少资源开销；例如上方示例仅启用Essentials、Bold、Italic、Font、Paragraph五个基础插件；
toolbar：数组形式配置工具栏按钮，'|'为分隔符。按钮名称需要与已加载插件对应，例如bold、italic分别对应Bold、Italic插件。

更全面的插件配置与"添加/移除功能"方法可参考配置编辑器功能文档。

在 CDN 集成中添加 Premium 付费功能

引入 Premium 资源

CKEditor 5 Premium 功能有独立的 CDN 资源与全局对象，需要额外引入两组资源：

样式表：位于主 CKEditor 5 样式表之后，以保证层叠顺序正确、必要时可覆盖主样式：

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.css" />

脚本：位于主 CKEditor 5 脚本之后、自定义初始化代码之前，加载后暴露全局对象CKEDITOR_PREMIUM_FEATURES：

<script src="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.umd.js"></script>

在 jQuery 初始化中加入 Premium 插件

以 Format Painter（格式刷）为例：它允许用户把一段文字的格式复制并应用到另一段文字。从CKEDITOR_PREMIUM_FEATURES中解构出FormatPainter插件，加入plugins数组，并在toolbar中加入'formatPainter'按钮：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CKEditor&nbsp;5 with jQuery and Premium Features</title> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.css" /> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.umd.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.umd.js"></script> </head> <body> <div id="editor"> <p>Hello from CKEditor&nbsp;5 with jQuery and Premium Features!</p> </div> <script> $( document ).ready( () => { const { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } = CKEDITOR; const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( { attachTo: $( '#editor' )[ 0 ], licenseKey: '<YOUR_LICENSE_KEY>', plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'formatPainter' ] } ) .then( editor => { // Editor initialized successfully with premium features. console.log( 'CKEditor&nbsp;5 with premium features initialized using jQuery!' ); } ) .catch( error => { console.error( 'Error initializing CKEditor&nbsp;5 with premium features:', error ); } ); } ); </script> </body> </html>

获取 Premium 功能的许可证密钥

Premium 功能需要商业许可证，最便捷的方式是注册 CKEditor Premium Features 14 天免费试用指南。

深入理解：CKEditor 5 初始化机制的源码视角

结合本仓库源码，可以进一步理解上文初始化代码背后发生的事：

编辑器类型：ClassicEditor是"经典编辑器"实现，采用内联可编辑区 + 粘性工具栏 + 盒式 UI 的组合，定义于 classiceditor.ts，其create()静态方法负责完成插件初始化、UI 挂载与数据加载的完整流程；
attachTo 校验：构造函数通过this.config.get( 'attachTo' )读取目标元素，若元素未连接到 DOM 会抛出editor-source-element-not-attached错误（classiceditor.ts），因此务必在$( document ).ready()之后再初始化编辑器；
表单集成：编辑器还通过attachToForm( this )（见 classiceditor.ts）与原生表单挂钩，配合updateSourceElementOnDestroy配置可在销毁或表单提交时将内容回写到源元素，这一点对传统 jQuery 表单提交场景很有价值；
资源加载辅助：如果不想手写<script>/<link>标签，还可以使用@ckeditor/ckeditor5-integrations-common包提供的loadCKEditorCloud()辅助函数按需加载 CDN 资源，详见加载 CDN 资源文档，其支持version、translations、premium、ckbox、plugins、injectedHtmlElementsAttributes等配置项。

下一步学习路径

完成 jQuery 集成后，可以继续深入以下主题：

读写编辑器数据：使用editor.getData()获取内容、editor.setData()替换内容，并通过root.initialData配置初始化内容，详见获取与设置数据指南；
深度定制编辑器：参考配置编辑器功能指南，学习更多插件、工具栏与功能级配置项；
功能详解：在功能索引中按需查阅各个具体功能的使用方式。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析