CKEditor 5 集成 Spring Boot基于 ZIP 自托管部署完整指南【免费下载链接】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 官方文档《Integrating CKEditor 5 with Spring Boot from ZIP》讲解如何在 Java 技术栈的 Spring Boot 应用中通过将 ZIP 自托管发行包放入静态资源目录完成富文本编辑器的集成。CKEditor 5 本质上是纯 JavaScript/TypeScript 库不依赖任何特定后端运行时因此可以被任何能提供静态资源的服务端承载Spring Boot 就是典型场景。读完本文你将掌握项目依赖搭建、ZIP 文件在src/main/resources/static下的目录组织、基于 import map 的 ESM 模块加载方式、ClassicEditor.create()的完整配置以及通过 Spring MVC 控制器渲染页面并运行验证的完整链路。为什么选择 ZIP 方式集成 Spring BootSpring Boot 没有官方针对 CKEditor 5 的集成包但 CKEditor 5 作为纯前端库只要宿主环境能通过 HTTP 提供 JS 与 CSS 静态资源即可正常运行。与 npm 构建和 CDN 分发相比ZIP 自托管方式有以下特点无需构建工具链不需要 npm、Vite、webpack 等打包器适合 Java 团队在不引入前端构建步骤的情况下快速落地内网与离线友好资源随应用一起部署不受外网 CDN 可用性影响也便于私有化交付版本可控将编辑器版本固定在 ZIP 目录中升级时替换目录即可实现缓存失效与回滚。本仓库当前版本为 48.5.0见 packages/ckeditor5/package.json下文示例配置均以该版本生态为准。第一步准备 Spring Boot 工程与依赖本指南假设你已有一个 Spring Boot 工程。如果没有可通过 Spring Initializr 快速生成并在生成时勾选 Spring Web 与 Thymeleaf 两个依赖。完整依赖清单如下对应pom.xmldependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-thymeleaf/artifactId /dependency /dependencies其中spring-boot-starter-web提供内嵌 Tomcat 与静态资源映射能力负责把src/main/resources/static/下的文件以/为根路径对外提供spring-boot-starter-thymeleaf用于渲染src/main/resources/templates/下的 HTML 模板本集成中我们使用 Thymeleaf 解析index.html并作为编辑器的宿主页面spring-boot-starter-test仅用于测试作用域。第二步获取并放置 ZIP 发行包从 CKEditor 5 官方下载页 或 CDN 的 zip 目录下载对应版本的发行包例如ckeditor5-48.5.0.zip。解压后将ckeditor5.js与ckeditor5.css两个文件复制到 Spring Boot 项目的src/main/resources/static/ckeditor5/目录下。ZIP 中还会附带index.html可直接运行的最小示例、ckeditor5.umd.jsUMD 备用构建、.map源码映射、translations/多语言目录以及README.md、LICENSE.md等文件可按需一并放置。复制完成后工程目录结构应如下├── src │ ├── main │ │ ├── java │ │ │ └── com │ │ │ └── example │ │ │ └── demo │ │ │ └── DemoApplication.java │ │ └── resources │ │ ├── static │ │ │ ├── ckeditor5 │ │ │ │ ├── ckeditor5.js │ │ │ │ └── ckeditor5.css │ │ │ └── ... │ │ ├── templates │ │ │ ├── ckeditor5.html │ │ │ └── ... │ │ └── application.properties │ └── test ├── pom.xml └── ...注意ZIP 中的示例index.html使用了 import map浏览器加载模块要求同源策略CORS满足即必须通过 HTTP 服务访问而不能直接以file://协议打开文件。Spring Boot 的内嵌服务器天然满足这一要求无需额外配置。第三步编写宿主 HTML 模板在src/main/resources/templates/目录创建或修改index.html。ZIP 包内的index.html已包含全部必需标记可直接复制并调整资源路径使其与你的目录结构匹配。核心要点有两个CSS 链接路径与import map 路径都要指向正确的静态资源位置。自 44.0.0 版本起licenseKey属性是使用编辑器所必需的。若使用 ZIP 自托管发行包你需要要么遵守 GPL 协议将licenseKey设为GPL编辑器区域会显示 Powered by CKEditor 标识要么获取自托管分发的商业授权详见 docs/getting-started/licensing/license-key-and-activation.md。可通过 免费试用 体验自托管评估。模板示例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCKEditor 5 - Spring Boot Integration/title link relstylesheet href/assets/vendor/ckeditor5.css style .main-container { width: 795px; margin-left: auto; margin-right: auto; } /style /head body div classmain-container div ideditor pHello from CKEditor 5!/p /div /div script typeimportmap { imports: { ckeditor5: ./ckeditor5/ckeditor5.js, ckeditor5/: ./ckeditor5/ } } /script script typemodule import { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font } from ckeditor5; ClassicEditor .create( { attachTo: document.querySelector( #editor ), licenseKey: YOUR_LICENSE_KEY, // Or GPL. plugins: [ Essentials, Paragraph, Bold, Italic, Font ], toolbar: [ undo, redo, |, bold, italic, |, fontSize, fontFamily, fontColor, fontBackgroundColor ] } ) .then( editor { window.editor editor; } ) .catch( error { console.error( error ); } ); /script /body /html对关键配置的逐项说明import mapckeditor5: ./ckeditor5/ckeditor5.js将裸模块名ckeditor5映射到静态目录中的 ESM 包ckeditor5/: ./ckeditor5/用于解析包内子路径。这两个映射必须与实际放置ckeditor5.js的目录一致否则浏览器会报 Failed to resolve module specifier 错误。attachTo指定编辑器挂载的 DOM 元素代替旧版在create( element )中传入容器的方式。脚本需放在div ideditor之后确保元素已存在于 DOM。plugins显式声明要加载的插件。Essentials是基础编辑能力的集合从源码看它聚合了AccessibilityHelp、Clipboard、Enter、SelectAll、ShiftEnter、Typing、Undo七类插件见 packages/ckeditor5-essentials/src/essentials.ts提供复制粘贴、回车换行、全选、输入与撤销/重做等核心编辑行为。Paragraph、Bold、Italic、Font则分别提供段落、粗体、斜体与字号/字体/颜色功能。toolbar工具栏项必须与已加载插件对应|为分隔符。then( editor { window.editor editor; } )把编辑器实例挂到window上便于在控制台调试或后续调用editor.getData()/editor.setData()。如果未加载Essentials等必要插件编辑器将无法提供基础编辑与撤销能力这是排查编辑器空白或不可编辑问题的首要检查点。第四步创建 Spring MVC 控制器要让页面能被访问需要创建一个Controller将根路径/映射到templates/index.htmlpackage com.example.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; Controller public class HomeController { GetMapping(/) public String home() { return index; } }这里返回字符串index会被 Thymeleaf 视图解析器解析为templates/index.html。静态资源static/ckeditor5/ckeditor5.js等则由 Spring Boot 默认的静态资源映射/**→classpath:/static/自动提供无需额外配置。第五步运行并验证在项目根目录执行以下命令启动应用./mvnw spring-boot:runWindows 环境使用mvnw.cmd spring-boot:run。启动成功后浏览器访问http://localhost:8080即可看到可编辑的富文本区域。若页面空白或报错可依序检查浏览器控制台是否有模块加载 404——核对 import map 与static/目录结构是否一致是否配置了licenseKey44.0.0 后为必填plugins与toolbar中引用的插件是否真实存在于当前构建包内ZIP 是固定构建不能引用未包含的插件是否通过 HTTP 访问file://直接打开会触发 CORS/import map 限制。结合源码理解集成原理CKEditor 5 的架构是 引擎 编辑器壳 插件 的三层模型ckeditor/ckeditor5-engine提供 MVC 架构、自定义数据模型与虚拟 DOMClassicEditor源码见 packages/ckeditor5-editor-classic/src/classiceditor.ts是经典工具栏布局的编辑器类型各功能以插件形式注入。这种纯前端、与后端解耦的设计正是它能够在 Spring Boot 这类 Java 服务中作为静态资源运行的根本原因——服务端只负责把文件喂给浏览器编辑器全部逻辑在浏览器端执行。后续扩展方向集成跑通后可进一步深入数据读写通过editor.getData()获取内容、editor.setData()回填内容也可让 ClassicEditor 直接替换textarea表单提交时编辑器会自动把数据写入该元素配合PostMapping控制器即可把富文本内容提交到后端详见 docs/getting-started/setup/getting-and-setting-data.md。配置与工具栏定制参考 docs/getting-started/setup/configuration.md 调整初始数据、占位符、语言等选项工具栏布局见 docs/getting-started/setup/toolbar.md。功能探索docs/features/index.md 列出了图片、表格、协作编辑等全部功能特性可按需选择适合的插件。许可证管理ZIP 自托管需在 GPL 与商业授权之间做出选择完整的许可证密钥类型与激活流程见 docs/getting-started/licensing/license-key-and-activation.md。【免费下载链接】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），仅供参考