在 Electron 桌面应用中集成 CKEditor 5：基于 CDN 的完整实战指南
发布时间：2026/9/15 17:00:49 作者：尧图编辑部 阅读量：1,286
在 Electron 桌面应用中集成 CKEditor 5基于 CDN 的完整实战指南【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5导读本指南以当前仓库CKEditor 5 富文本编辑器框架中的 CDN 集成文档 为主线讲解如何把 CKEditor 5 通过 CDN 方式集成进 Electron 桌面应用因为 Electron 窗口由 Chromium 渲染CKEditor 5 的 HTML 编辑器在 Electron 渲染进程中运行方式与浏览器完全一致你可以像在网页中一样用几行script标签把编辑器搬进桌面窗口。读完本文你将掌握从零搭建 Electron Vite 项目、通过 CDN 引入开源与付费premium功能、用attachTo初始化编辑器实例的完整流程并理解其底层实现原理。为什么 Electron 项目可以复用 CDN 集成方式Electron 应用由两个进程组成主进程main process负责管理应用生命周期与系统窗口渲染进程renderer process则运行着 Chromium 浏览器内核。CKEditor 5 是标准的 HTML 富文本编辑器它的 UI 与编辑区都构建在 DOM 之上因此在 Electron 渲染进程中编辑器就像在 Chrome 浏览器里一样正常工作无需任何 Node.js 特定适配。这一点与把编辑器加载到普通网页完全等价——这也是 quick-start.md 中 CDN 安装方式能够无缝复用的根本原因你只需要在 Electron 渲染进程的 HTML 页面里像普通网页一样引入 CSS 与 JS 资源即可。快速开始搭建 Electron 项目官方推荐的脚手架是 Electron Forge 的create-electron-app命令。在终端执行npx create-electron-applatest my-app执行时你会被提示选择打包器bundler与语言。本指南与官方文档一致选择ViteVanilla JavaScript。由于 Vite 是 Electron Forge 的渲染进程打包方案后文会专门说明它与 CDN/ESM 引入方式的配合问题。搭建完成后进入应用目录并启动cd my-app npm start此时应用应能正常打开一个 Electron 窗口。若你是第一次接触 Electron建议先阅读其官方入门教程了解基本概念。集成 CKEditor 5 到 Electron逐步实现最终项目结构完成全部步骤后应用目录结构应类似├── forge.config.js ├── index.html ├── node_modules/ ├── package-lock.json ├── package.json ├── src/ │ ├── index.css │ ├── main.js │ ├── preload.js │ └── renderer.js ├── vite.main.config.mjs ├── vite.preload.config.mjs └── vite.renderer.config.mjs其中index.html与src/是渲染进程的入口正是我们要放置编辑器的地方。第一步创建 editor.js 并初始化编辑器在src/目录下新建文件editor.js写入以下内容const { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } CKEDITOR; const { FormatPainter } CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( { attachTo: document.querySelector( #editor ), licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ], toolbar: [ undo, redo, |, bold, italic, |, fontSize, fontFamily, fontColor, fontBackgroundColor, |, formatPainter ] } ) .then( /* ... */ ) .catch( /* ... */ );这段代码做了三件事从 CDN 暴露的全局变量CKEDITOR中解构出经典编辑器类ClassicEditor与开源插件Essentials、Bold、Italic、Font、Paragraph从付费功能全局变量CKEDITOR_PREMIUM_FEATURES中取出FormatPainter格式刷调用ClassicEditor.create()创建编辑器实例并挂载到#editor元素上。关于attachTo配置项这是经典编辑器ClassicEditor特有的配置用于指定编辑器要替换的 DOM 元素。从源码看classiceditor.ts 的构造函数会调用normalizeRootsConfig()对配置做归一化再通过this.config.get( attachTo )读取该元素作为sourceElement而 normalizerootsconfig.ts 中的separateAttachTo参数专门处理了经典编辑器的这种外部指定挂载元素模式——attachTo只被当作数据来源和挂载目标而不会被当作可编辑根元素经典编辑器会用自带的 UI 盒子替换掉该元素。同时要注意attachTo仅适用于 ClassicEditor其它编辑器类型如 inline、balloon、decoupled在根元素内部直接渲染配置attachTo会触发editor-create-attachto-ignored错误。关于create()的三种初始化形态根据 classiceditor.ts 的文档注释create()支持挂载到已有 DOM 元素本指南用法attachTo: document.querySelector( #editor )元素内容会作为编辑器初始数据元素随后被编辑器 UI 替换创建脱离文档的编辑器不传attachTo通过root: { initialData: pHello world!/p }提供初始数据之后用document.body.appendChild( editor.ui.element )手动插入 DOM混合方式同时提供attachTo与root.initialData适合难以预先设置源元素内容的情形。create()返回 Promisethen中拿到可用的编辑器实例catch中可捕获初始化错误如密钥无效、元素未挂载到 DOM 会抛editor-source-element-not-attached。第二步改写 index.html 引入 CDN 资源把index.html修改为!doctype html html head meta charsetUTF-8 / titleHello World!/title link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.css / link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.css / script srchttps://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.umd.js/script script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.umd.js/script /head body h1Hello Electron and CKEditor 5!/h1 pWelcome to your Electron application. Below you should see a working instance of CKEditor 5:/p div ideditor/div script src./src/editor.js/script script typemodule src/src/renderer.js/script /body /html其中{var ckeditor5-version}是文档占位符实际使用时应替换为具体版本号例如44.0.0。这段 HTML 的关键改动两个link样式表ckeditor5.css包含编辑器 UI 与内容的全部样式ckeditor5-premium-features.css则是付费插件如 FormatPainter的独立样式表只有使用付费功能时才需要两个script资源ckeditor5.umd.js暴露全局变量CKEDITORckeditor5-premium-features.umd.js暴露全局变量CKEDITOR_PREMIUM_FEATURES两者通过全局对象解构即可使用div ideditor/div编辑器的挂载占位符其 ID 必须与editor.js中attachTo的查询选择器一致script src./src/editor.js负责把以上资源串起来并完成编辑器初始化注意renderer.js仍以 ES Module 方式加载二者互不冲突。第三步启动并验证在应用根目录执行npm startElectron 会自动打开一个窗口其中即可看到一个可编辑的 CKEditor 5 实例深入CDN 两种引入方式的取舍上文使用 UMD 全局变量方式零打包、开箱即用是最快路径。但对于依赖构建工具尤其是 Electron Forge 默认采用的 Vite的项目还可以选择更工程化的import mapsESM方式详见 quick-start.md 的进阶章节。import map 允许用简短标识符映射 CDN 上的完整 URL并让开源与付费插件共享同一份引擎代码script typeimportmap { imports: { ckeditor5: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/ckeditor5.js, ckeditor5/: https://cdn.ckeditor.com/ckeditor5/{var ckeditor5-version}/, ckeditor5-premium-features: https://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ckeditor5-premium-features.js, ckeditor5-premium-features/: https://cdn.ckeditor.com/ckeditor5-premium-features/{var ckeditor5-version}/ } } /script之后即可用标准 ESM 语法导入script typemodule import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from ckeditor5; import { FormatPainter } from ckeditor5-premium-features; ClassicEditor .create( { attachTo: document.querySelector( #editor ), licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ], toolbar: [ undo, redo, |, bold, italic, |, fontSize, fontFamily, fontColor, fontBackgroundColor, |, formatPainter ] } ) .then( /* ... */ ) .catch( /* ... */ ); /script使用 import maps 有两点必须注意必须通过本地服务器HTTP/HTTPS访问页面直接双击打开 HTML 会因浏览器 CORS 安全策略导致模块加载失败Vite 需要额外配置。Vite 对原生 import map 与外部 ESM 模块支持不完整构建期解析导入直接使用 ESM 语法可能导致回退到 UMD 包或直接报错。官方给出的解决方案是编写一个自定义 Vite 插件将ckeditor5与ckeditor5-premium-features及其子路径声明为 external交由浏览器运行时通过 import map 解析export function viteCKEditorExternalize() { return { name: ckeditor5-externalize, enforce: pre, config: ( config ) { config.optimizeDeps ?? {}; config.optimizeDeps.exclude [ ...( config.optimizeDeps.exclude ?? [] ), ckeditor5, ckeditor5-premium-features ]; config.build ?? {}; config.build.rollupOptions ?? {}; config.build.rollupOptions.external [ ...( config.build.rollupOptions.external ?? [] ), ckeditor5, ckeditor5-premium-features, /^ckeditor5\/.*/, /^ckeditor5-premium-features\/.*/ ]; }, configResolved: ( resolvedConfig ) { ( resolvedConfig.plugins ).push( { name: remove-id-prefix, transform: ( code ) { if ( typeof code string ) { return code.replace( /\/id\/ckeditor5/g, ckeditor5 ); } return null; } } ); }, resolveId: ( id ) { if ( id ckeditor5 || id ckeditor5-premium-features || id.startsWith( ckeditor5/ ) || id.startsWith( ckeditor5-premium-features/ ) ) { return { id, external: true }; } return null; } }; }然后在 Vite 配置中启用// vite.config.js import { viteCKEditorExternalize } from ./plugins/vite-ckeditor-externalize.js; export default { plugins: [ viteCKEditorExternalize() ] };小提示本指南演示的 UMD 方式不依赖任何打包器因此在 Electron Forge Vite 模板中开箱即用无需上述插件。获取付费功能Premium Features的许可证密钥示例配置中的licenseKey: YOUR_LICENSE_KEY是激活付费功能如 FormatPainter的必要参数。要获得密钥注册 CKEditor Premium Features 14 天免费试用即可快速获得商用许可证如需定制方案可直接联系官方销售团队获取报价。拿到激活密钥后请按 许可证密钥与激活指南 完成激活流程。若使用开源免费功能而不需要付费插件可移除licenseKey配置与CKEDITOR_PREMIUM_FEATURES相关的引用。其它安装方式对照与进阶阅读如果你不希望依赖 CDN例如要求完全离线的桌面应用仓库中还提供了对应的 ZIP 离线包集成指南在 Online Builder 中选择 Vanilla JavaScript Self-hosted (ZIP) 下载自定义构建将其解压到应用目录并把index.html中的 CDN 链接替换为./ckeditor5-builder/...形式的本地相对路径其余初始化代码与本文完全一致。在此基础上可继续深入掌握 获取与设置编辑器数据实现桌面应用内内容的读取与回填查看 编辑器配置指南 与 工具栏配置按需定制 UI 与行为浏览 功能索引了解可选的编辑器功能模块参考 CDN 资源加载说明 与 编辑器类型选择选择合适的编辑器形态与加载策略。小结本指南完整覆盖了 Electron 桌面应用通过 CDN 集成 CKEditor 5 的路径从 Electron Forge 脚手架、双样式表/双脚本的资源引入、ClassicEditor.create()的三种初始化方式与attachTo的底层归一化逻辑到 import maps 与 Vite 外部化的工程化进阶再到付费密钥获取与离线 ZIP 方案对照。这套方案不需要任何打包器参与即可在 Electron 渲染进程中获得完整可用的富文本编辑能力是桌面端嵌入 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
尧图网站开发 