在 Electron 桌面应用中集成 CKEditor 5ZIP 自托管方案完整指南【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5CKEditor 5 是模块化架构的富文本编辑器框架其渲染层基于浏览器原生能力构建。由于 Electron 窗口由 Chromium 内核渲染CKEditor 5 的 HTML 编辑器可以像运行在网页中一样运行在 Electron 的渲染进程renderer process里。本指南将带你使用「Online Builder 生成的自定义构建 ZIP 自托管包」的方式把 CKEditor 5 集成进一个 Electron 桌面应用涵盖项目搭建、ZIP 包准备、编辑器初始化、许可证激活等完整流程。读完本文你将能够在 Electron 应用中快速落地一个带工具栏、可扩展插件的所见即所得编辑器。本文对应的完整参考文档位于 docs/getting-started/integrations/electron.md并辅以仓库中相关源码与配置佐证。为什么可以这样集成Electron 应用的主进程main process负责创建窗口而每个窗口中的页面内容由渲染进程加载。因为渲染进程运行的就是 Chromium 渲染引擎CKEditor 5 的编辑视图、交互逻辑与浏览器环境完全一致——不需要任何原生native适配层直接把网页版编辑器资源加载进来即可工作。本文采用ZIP 自托管方案即把编辑器构建产物以静态文件形式打包进 Electron 应用目录。其核心优势是无需 npm 构建链解压即用不依赖 CDN可在离线环境运行也便于版本锁定与 CDN 方案相比所有资源随应用本地分发加载稳定。如需 CDN 方式可参考 docs/getting-started/integrations-cdn/electron.md集成思路一致仅资源引入方式不同。快速开始搭建 Electron 项目如果你对 Electron 尚不熟悉建议先阅读其官方入门教程了解基础概念。最快的建项目方式是使用 Electron Forge 的脚手架命令npx create-electron-applatest my-app执行时CLI 会提示你选择打包器bundler和语言。本教程选用Vite 原生 JavaScriptvanilla JavaScript组合。脚手架完成后进入项目目录并启动cd my-app npm start此时应该能看到一个默认的 Electron 窗口打开说明项目搭建成功。准备 CKEditor 5 的 ZIP 包在 Electron 中使用的编辑器需要一个自定义构建custom build而最省事的制作方式就是 CKEditor 5 Online Builder。打开 CKEditor 5 Online Builder通过图形化界面选择所需的插件features与工具栏布局无需手写任何配置代码在最后一步选择技术与集成方式Vanilla JavaScript和Self-hosted (ZIP)下载生成的 ZIP 归档。下载的 ZIP 包已包含集成所需的全部文件主 JavaScript 文件、样式表CSS、以及示例实现代码。该包开箱即用无需任何额外的构建步骤。拿到包后将其解压本文示例中解压目录名为ckeditor5-builder放入 Electron 应用主目录即可。说明ZIP 方案属于自托管self-hosted分发方式。与 npm 安装方式一致自托管分发要求配置licenseKey要么遵循 GPL 协议要么购买自托管商业许可详见下文「获取许可证」章节。仓库中 docs/getting-started/integrations/quick-start.md 对 ZIP 包内的文件构成有更细致的说明。项目结构一览完成上述步骤后应用目录结构应类似├── ckeditor5-builder # 从 Online Builder 解压出的编辑器资源目录 ├── forge.config.js ├── index.html ├── node_modules/ ├── package-lock.json ├── package.json ├── src/ │ ├── index.css │ ├── main.js # Electron 主进程 │ ├── preload.js # 预加载脚本 │ └── renderer.js # 渲染进程入口 ├── vite.main.config.mjs ├── vite.preload.config.mjs └── vite.renderer.config.mjs其中ckeditor5-builder即 Online Builder 下载并解压后的文件夹。主进程src/main.js、预加载脚本src/preload.js与渲染进程src/renderer.js由 Electron Forge 脚手架生成保持默认即可我们的集成工作集中在index.html与新增的src/editor.js上。实现编辑器1. 创建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( /* ... */ );这段代码的关键点CKEDITOR与CKEDITOR_PREMIUM_FEATURES是全局命名空间它们由后续在 HTML 中引入的两个 UMD 构建文件提供ckeditor5.umd.js与ckeditor5-premium-features.umd.js无需 import 语句plugins数组传入要加载的插件类。Essentials是必备的核心编辑插件包含撤销、剪贴板等基础能力Bold、Italic、Font、Paragraph分别提供加粗、斜体、字体字号/字族/颜色/背景色与段落功能FormatPainter是 premium 功能中的格式刷插件toolbar数组按顺序声明工具栏按钮|表示分组分隔符undo/redo对应撤销/重做licenseKey激活编辑器的许可证密钥必须按实际值替换YOUR_LICENSE_KEYattachTo指定编辑器挂载的 DOM 元素即index.html中的#editor容器。该配置对应仓库中的EditorConfig类型定义见 packages/ckeditor5-core/src/editor/editorconfig.tslicenseKey、plugins、toolbar等均为标准配置项对所有编辑器类型Classic、Inline、Decoupled 等通用。2. 修改index.html将脚手架生成的index.html调整为!doctype html html head meta charsetUTF-8 / titleHello World!/title link relstylesheet href./ckeditor5-builder/ckeditor5/ckeditor5.css link relstylesheet href./ckeditor5-builder/ckeditor5-premium-features/ckeditor5-premium-features.css /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./ckeditor5-builder/ckeditor5/ckeditor5.umd.js/script script src./ckeditor5-builder/ckeditor5-premium-features/ckeditor5-premium-features.umd.js/script script src./src/editor.js/script script typemodule src/src/renderer.js/script /body /html各引入资源的职责如下资源作用ckeditor5.css编辑器基础 UI 与内容样式ckeditor5-premium-features.csspremium 功能的样式如格式刷ckeditor5.umd.jsCKEditor 5 的 UMD 构建暴露全局CKEDITOR对象ckeditor5-premium-features.umd.jspremium 功能 UMD 构建暴露全局CKEDITOR_PREMIUM_FEATURES对象src/editor.js负责把上述资源串联起来并初始化编辑器实例src/renderer.jsElectron 渲染进程脚本保持脚手架默认需要注意脚本引入的顺序必须先加载 UMD 构建文件再加载依赖它们的editor.js。3. 运行应用一切就绪后执行npm startElectron 会自动打开一个窗口其中即包含一个可用的 CKEditor 5 实例效果如上文配图所示。由于资源从本地目录加载即使断网也能正常运行。获取 premium 功能的许可证密钥示例中使用了FormatPainter格式刷这一 premium 功能因此必须使用商业许可证激活免费试用注册 CKEditor Premium Features 14 天免费试用 是最快的体验方式商业采购可联系销售团队获取定制化报价。拿到激活密钥后将其填入editor.js的licenseKey配置项即可。完整流程账户创建、Customer Portal 登录、License keys 区获取密钥、密钥类型说明参见 docs/getting-started/licensing/license-key-and-activation.md。这里补充几点与 Electron 自托管场景强相关的许可证要点依据上述授权文档GPL密钥仅适用于自托管分发npm 或 ZIP 下载Cloud CDN 分发不接受GPL密钥。ZIP 自托管方案正好符合此条件——如果你的项目满足 GPL 合规要求且不包含 premium 功能可直接在licenseKey中写GPL开发环境密钥若使用开发Development类型密钥编辑器运行时会显示开发用途横幅且仅限localhost、127.0.0.1、192.168.*.*等本地域使用不得用于生产生产密钥无功能限制可选配 Approved hosts 白名单最多 5 个域名/IP进一步防止密钥被未授权使用。在 Electron 中读写编辑器内容编辑器初始化完成后与数据交互的标准方式是getData()与setData()详见 docs/getting-started/setup/getting-and-setting-data.md// 保存编辑器引用放在 create().then() 回调之外 let editor; ClassicEditor .create( { attachTo: document.querySelector( #editor ), licenseKey: YOUR_LICENSE_KEY, // Or GPL. plugins: [ /* ... */ ], toolbar: [ /* ... */ ] } ) .then( newEditor { editor newEditor; } ) .catch( error { console.error( error ); } ); // 例如点击按钮时把 HTML 数据发送到本地/远程 document.querySelector( #save ).addEventListener( click, () { const data editor.getData(); // 持久化 data写入本地文件、调用后端接口等 } ); // 需要时替换整个内容 editor.setData( pSome text./p );getData()/setData()是Editor基类提供的方法源码见 packages/ckeditor5-core/src/editor/editor.ts对所有编辑器类型一致。在 Electron 场景中你可以把getData()返回的 HTML 通过ipcRenderer发给主进程再用 Node.js 的fs模块写盘即可实现本地文档的保存能力。进阶继续定制与学习数据读写进阶root.initialData初始化数据、editor.getData()选项参数、HTML 表单自动同步等见 获取与设置数据编辑器配置插件安装、工具栏定制、licenseKey等更多配置项见 配置指南功能探索图片、表格、列表、协作等各功能的详细用法见 功能文档总览许可证与激活密钥类型、免费计划、自托管合规要求见 License key and activation。【免费下载链接】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），仅供参考 在 Electron 桌面应用中集成 CKEditor 5（ZIP 自托管方案）完整指南
在 Electron 桌面应用中集成 CKEditor 5ZIP 自托管方案完整指南【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5CKEditor 5 是模块化架构的富文本编辑器框架其渲染层基于浏览器原生能力构建。由于 Electron 窗口由 Chromium 内核渲染CKEditor 5 的 HTML 编辑器可以像运行在网页中一样运行在 Electron 的渲染进程renderer process里。本指南将带你使用「Online Builder 生成的自定义构建 ZIP 自托管包」的方式把 CKEditor 5 集成进一个 Electron 桌面应用涵盖项目搭建、ZIP 包准备、编辑器初始化、许可证激活等完整流程。读完本文你将能够在 Electron 应用中快速落地一个带工具栏、可扩展插件的所见即所得编辑器。本文对应的完整参考文档位于 docs/getting-started/integrations/electron.md并辅以仓库中相关源码与配置佐证。为什么可以这样集成Electron 应用的主进程main process负责创建窗口而每个窗口中的页面内容由渲染进程加载。因为渲染进程运行的就是 Chromium 渲染引擎CKEditor 5 的编辑视图、交互逻辑与浏览器环境完全一致——不需要任何原生native适配层直接把网页版编辑器资源加载进来即可工作。本文采用ZIP 自托管方案即把编辑器构建产物以静态文件形式打包进 Electron 应用目录。其核心优势是无需 npm 构建链解压即用不依赖 CDN可在离线环境运行也便于版本锁定与 CDN 方案相比所有资源随应用本地分发加载稳定。如需 CDN 方式可参考 docs/getting-started/integrations-cdn/electron.md集成思路一致仅资源引入方式不同。快速开始搭建 Electron 项目如果你对 Electron 尚不熟悉建议先阅读其官方入门教程了解基础概念。最快的建项目方式是使用 Electron Forge 的脚手架命令npx create-electron-applatest my-app执行时CLI 会提示你选择打包器bundler和语言。本教程选用Vite 原生 JavaScriptvanilla JavaScript组合。脚手架完成后进入项目目录并启动cd my-app npm start此时应该能看到一个默认的 Electron 窗口打开说明项目搭建成功。准备 CKEditor 5 的 ZIP 包在 Electron 中使用的编辑器需要一个自定义构建custom build而最省事的制作方式就是 CKEditor 5 Online Builder。打开 CKEditor 5 Online Builder通过图形化界面选择所需的插件features与工具栏布局无需手写任何配置代码在最后一步选择技术与集成方式Vanilla JavaScript和Self-hosted (ZIP)下载生成的 ZIP 归档。下载的 ZIP 包已包含集成所需的全部文件主 JavaScript 文件、样式表CSS、以及示例实现代码。该包开箱即用无需任何额外的构建步骤。拿到包后将其解压本文示例中解压目录名为ckeditor5-builder放入 Electron 应用主目录即可。说明ZIP 方案属于自托管self-hosted分发方式。与 npm 安装方式一致自托管分发要求配置licenseKey要么遵循 GPL 协议要么购买自托管商业许可详见下文「获取许可证」章节。仓库中 docs/getting-started/integrations/quick-start.md 对 ZIP 包内的文件构成有更细致的说明。项目结构一览完成上述步骤后应用目录结构应类似├── ckeditor5-builder # 从 Online Builder 解压出的编辑器资源目录 ├── forge.config.js ├── index.html ├── node_modules/ ├── package-lock.json ├── package.json ├── src/ │ ├── index.css │ ├── main.js # Electron 主进程 │ ├── preload.js # 预加载脚本 │ └── renderer.js # 渲染进程入口 ├── vite.main.config.mjs ├── vite.preload.config.mjs └── vite.renderer.config.mjs其中ckeditor5-builder即 Online Builder 下载并解压后的文件夹。主进程src/main.js、预加载脚本src/preload.js与渲染进程src/renderer.js由 Electron Forge 脚手架生成保持默认即可我们的集成工作集中在index.html与新增的src/editor.js上。实现编辑器1. 创建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( /* ... */ );这段代码的关键点CKEDITOR与CKEDITOR_PREMIUM_FEATURES是全局命名空间它们由后续在 HTML 中引入的两个 UMD 构建文件提供ckeditor5.umd.js与ckeditor5-premium-features.umd.js无需 import 语句plugins数组传入要加载的插件类。Essentials是必备的核心编辑插件包含撤销、剪贴板等基础能力Bold、Italic、Font、Paragraph分别提供加粗、斜体、字体字号/字族/颜色/背景色与段落功能FormatPainter是 premium 功能中的格式刷插件toolbar数组按顺序声明工具栏按钮|表示分组分隔符undo/redo对应撤销/重做licenseKey激活编辑器的许可证密钥必须按实际值替换YOUR_LICENSE_KEYattachTo指定编辑器挂载的 DOM 元素即index.html中的#editor容器。该配置对应仓库中的EditorConfig类型定义见 packages/ckeditor5-core/src/editor/editorconfig.tslicenseKey、plugins、toolbar等均为标准配置项对所有编辑器类型Classic、Inline、Decoupled 等通用。2. 修改index.html将脚手架生成的index.html调整为!doctype html html head meta charsetUTF-8 / titleHello World!/title link relstylesheet href./ckeditor5-builder/ckeditor5/ckeditor5.css link relstylesheet href./ckeditor5-builder/ckeditor5-premium-features/ckeditor5-premium-features.css /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./ckeditor5-builder/ckeditor5/ckeditor5.umd.js/script script src./ckeditor5-builder/ckeditor5-premium-features/ckeditor5-premium-features.umd.js/script script src./src/editor.js/script script typemodule src/src/renderer.js/script /body /html各引入资源的职责如下资源作用ckeditor5.css编辑器基础 UI 与内容样式ckeditor5-premium-features.csspremium 功能的样式如格式刷ckeditor5.umd.jsCKEditor 5 的 UMD 构建暴露全局CKEDITOR对象ckeditor5-premium-features.umd.jspremium 功能 UMD 构建暴露全局CKEDITOR_PREMIUM_FEATURES对象src/editor.js负责把上述资源串联起来并初始化编辑器实例src/renderer.jsElectron 渲染进程脚本保持脚手架默认需要注意脚本引入的顺序必须先加载 UMD 构建文件再加载依赖它们的editor.js。3. 运行应用一切就绪后执行npm startElectron 会自动打开一个窗口其中即包含一个可用的 CKEditor 5 实例效果如上文配图所示。由于资源从本地目录加载即使断网也能正常运行。获取 premium 功能的许可证密钥示例中使用了FormatPainter格式刷这一 premium 功能因此必须使用商业许可证激活免费试用注册 CKEditor Premium Features 14 天免费试用 是最快的体验方式商业采购可联系销售团队获取定制化报价。拿到激活密钥后将其填入editor.js的licenseKey配置项即可。完整流程账户创建、Customer Portal 登录、License keys 区获取密钥、密钥类型说明参见 docs/getting-started/licensing/license-key-and-activation.md。这里补充几点与 Electron 自托管场景强相关的许可证要点依据上述授权文档GPL密钥仅适用于自托管分发npm 或 ZIP 下载Cloud CDN 分发不接受GPL密钥。ZIP 自托管方案正好符合此条件——如果你的项目满足 GPL 合规要求且不包含 premium 功能可直接在licenseKey中写GPL开发环境密钥若使用开发Development类型密钥编辑器运行时会显示开发用途横幅且仅限localhost、127.0.0.1、192.168.*.*等本地域使用不得用于生产生产密钥无功能限制可选配 Approved hosts 白名单最多 5 个域名/IP进一步防止密钥被未授权使用。在 Electron 中读写编辑器内容编辑器初始化完成后与数据交互的标准方式是getData()与setData()详见 docs/getting-started/setup/getting-and-setting-data.md// 保存编辑器引用放在 create().then() 回调之外 let editor; ClassicEditor .create( { attachTo: document.querySelector( #editor ), licenseKey: YOUR_LICENSE_KEY, // Or GPL. plugins: [ /* ... */ ], toolbar: [ /* ... */ ] } ) .then( newEditor { editor newEditor; } ) .catch( error { console.error( error ); } ); // 例如点击按钮时把 HTML 数据发送到本地/远程 document.querySelector( #save ).addEventListener( click, () { const data editor.getData(); // 持久化 data写入本地文件、调用后端接口等 } ); // 需要时替换整个内容 editor.setData( pSome text./p );getData()/setData()是Editor基类提供的方法源码见 packages/ckeditor5-core/src/editor/editor.ts对所有编辑器类型一致。在 Electron 场景中你可以把getData()返回的 HTML 通过ipcRenderer发给主进程再用 Node.js 的fs模块写盘即可实现本地文档的保存能力。进阶继续定制与学习数据读写进阶root.initialData初始化数据、editor.getData()选项参数、HTML 表单自动同步等见 获取与设置数据编辑器配置插件安装、工具栏定制、licenseKey等更多配置项见 配置指南功能探索图片、表格、列表、协作等各功能的详细用法见 功能文档总览许可证与激活密钥类型、免费计划、自托管合规要求见 License key and activation。【免费下载链接】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），仅供参考