在 Laravel 中通过 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/ckeditor5CKEditor 5 是一个采用模块化架构的富文本编辑器框架其核心以纯 JavaScript/TypeScript 编写因此可以运行在任何能够提供静态资源的环境中——包括基于 PHP 的 Laravel 应用。本指南基于仓库文档 docs/getting-started/integrations-cdn/laravel.md 展开完整演示如何在 Laravel 项目的 Blade 模板中通过 CDN 引入 CKEditor 5含开源与付费功能完成编辑器初始化、工具条配置、数据读写与表单集成。读完本文你将掌握一套无需构建工具、仅靠几行 HTML 标签即可在 Laravel 页面中跑起富文本编辑器的实战方案。为什么 Laravel 可以零依赖集成 CKEditor 5Laravel 官方并没有为 CKEditor 5 提供专门的一体化集成包但这并不构成障碍。CKEditor 5 是纯粹的 JavaScript/TypeScript 库它的渲染、编辑、数据管线完全在浏览器端完成与后端语言无关。Laravel 作为服务端框架只需要在 Blade 视图resources/views下的.blade.php文件中把编辑器的 CSS 与 JS 资源从 CDN 加载进来再提供一个挂载点div编辑器即可工作。CKEditor 5 仓库中的每个功能都由独立包实现例如packages/ckeditor5-basic-styles、packages/ckeditor5-font、packages/ckeditor5-paragraph而 CDN 分发方式将这些包统一打包为 UMD 格式浏览器直接以script标签加载后即可使用无需 npm 安装、无需 Webpack/Vite 构建非常适合快速集成到既有 Laravel 项目中。准备一个 Laravel 项目本指南假定你已有一个可运行的 Laravel 项目。如果还没有可以通过 Composer 快速创建基础项目composer create-project laravel/laravel example-app创建完成后项目的典型目录结构如下其中我们唯一需要改动的是resources/views目录下的 Blade 模板├── app ├── bootstrap ├── config ├── database ├── public │ ├── .htaccess │ ├── favicon.ico │ ├── index.php │ └── robots.txt ├── resources │ ├── views │ | ├── welcome.blade.php │ | └── ... ├── routes └── ...在 Blade 模板中引入 CDN 资源打开resources/views/welcome.blade.php在head中引入编辑器的样式表与脚本。开源功能与付费premium功能分别打包因此有两组不同的标签——只有当你实际使用 premium 功能时才需要引入第二组。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCKEditor 5 - Quick start CDN/title link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css / script srchttps://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.umd.js/script !-- Add if you use premium features. -- link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/ckeditor5-premium-features.css / script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/ckeditor5-premium-features.umd.js/script !-- -- 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 /body /html几点说明ckeditor5.css包含了编辑器 UI 与内容展示所需的全部样式必须先于编辑器渲染加载。版本号应替换为你实际使用的版本且 CSS/JS 需保持版本一致。上面模板中的版本号43.0.0是文档示例值实际使用时建议从 CDN 提供的版本列表中选择并统一替换。如果使用 CDN 的 Cloud 服务需要先注册一个免费账户更多细节参见仓库文档 docs/getting-started/licensing/license-key-and-activation.md。初始化编辑器全局变量与 create() 配置上述两个脚本会分别向全局暴露名为CKEDITOR和CKEDITOR_PREMIUM_FEATURES的变量。通过对象解构即可取出编辑器类与所需插件script 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( /* ... */ ); /scriptattachTo挂载目标attachTo指定编辑器要挂载的 DOM 元素create()内部会读取该配置并完成 UI 构建与数据绑定。从源码看ClassicEditor.create()的执行流程为创建编辑器实例 →initPlugins()初始化插件 → 校验根元素 →ui.init()初始化 UI →data.init()加载初始数据 → 触发ready事件见 packages/ckeditor5-editor-classic/src/classiceditor.ts。如果传入的挂载元素未连接到 DOM会抛出editor-source-element-not-attached错误因此脚本必须放在挂载元素之后或包裹在DOMContentLoaded中。licenseKey许可证激活licenseKey是激活编辑器尤其是 premium 功能所必需的配置项它定义于 packages/ckeditor5-core/src/editor/editorconfig.ts。在纯开源 GPL 合规使用场景下可填GPL但需要注意GPL键只适用于自托管分发npm 或 ZIP 下载通过 CDN 的云分发不接受GPL键始终要求商业许可证。云 CDN 场景可注册免费商业计划每月 1000 次编辑器加载含 14 天 premium 全功能试用详见 docs/getting-started/licensing/license-key-and-activation.md。plugins 与 toolbar功能装配CKEditor 5 的一切功能都由插件实现先在plugins数组中声明插件类再在toolbar中放置对应的工具条按钮。上例中Essentials提供撤销/重做等基础能力Bold/Italic提供加粗斜体Font提供字号、字体、字体颜色与背景色Paragraph提供段落支持FormatPainterpremium提供格式刷。工具条中的|表示分隔符。功能的完整配置方式可参考 docs/getting-started/setup/configuration.md 与各功能对应的 docs/features/index.md。完整的最终模板将初始化脚本放在div ideditor元素之后确保编辑器能够成功挂载。最终的welcome.blade.php应类似如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCKEditor 5 - Quick start CDN/title link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css / script srchttps://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.umd.js/script !-- Add if you use premium features. -- link relstylesheet hrefhttps://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/ckeditor5-premium-features.css / script srchttps://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/ckeditor5-premium-features.umd.js/script !-- -- 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 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( /* ... */ ); /script /body /html启动开发服务器查看效果在 Laravel 项目根目录执行以下命令启动内置开发服务器php artisan serve浏览器访问http://127.0.0.1:8000即可看到 CKEditor 5 已渲染到页面中。注意Blade 模板中的div ideditor内的初始内容如pHello from CKEditor 5!/p会被自动作为编辑器的初始数据加载。在 Laravel 场景中读写编辑器数据通过表单自动提交textarea 方式这是 CMS、评论、留言板等场景最常见的做法用textarea作为挂载元素CKEditor 5 会在表单提交前自动把编辑内容写回textarea服务端无需任何 JavaScript 辅助即可收到数据。编辑器源码中的attachToForm见 packages/ckeditor5-editor-classic/src/classiceditor.ts正是为此设计该能力仅对 Classic 编辑器且挂载元素为textarea时生效。Blade 模板中需要注意使用{!! $data !!}输出富文本 HTML或在写入textarea时用htmlspecialchars()转义避免内容被浏览器当作标签解析。通过 getData() / setData() 手动读写若希望通过 Ajax 异步提交可在create().then()回调中保存编辑器实例随后随时调用let editor; ClassicEditor .create( { /* ... */ } ) .then( newEditor { editor newEditor; } ) .catch( error { console.error( error ); } ); // 提交时读取内容 const data editor.getData(); // 需要时替换内容 editor.setData( pSome text./p );更完整的生命周期、表单集成与数据操作细节参见 docs/getting-started/setup/getting-and-setting-data.md。在 Laravel 服务端接收内容表单提交后Laravel 控制器可通过请求对象读取编辑器内容例如$request-input(content)。由于 CKEditor 输出的是完整 HTML 片段存入数据库前建议根据你的安全策略做必要的净化处理如配置 HTML Purifier 等过滤组件。进阶方向选择其他编辑器类型CKEditor 5 共提供六种开箱即用的编辑器类型——classic、inline、balloon、balloon block、decoupleddocument与 multi-root它们的 UI 与编辑方式各不相同部分功能仅适用于特定类型详见 docs/getting-started/setup/editor-types.md。加载更多 CDN 资源当需要条件加载或动态加载资源时官方还提供loadCKEditorCloud/useCKEditorCloud辅助函数可统一管理 CDN 资源注入、去重与加载状态参见 docs/getting-started/setup/loading-cdn-resources.md。深度自定义编辑器在create()中继续扩展plugins与toolbar即可按需装配其余开源功能如列表、表格、图片、代码块、媒体嵌入等相关说明见 docs/getting-started/setup/configuration.md 与功能总览 docs/features/index.md。理解底层实现编辑器类的完整源码位于 packages/ckeditor5-editor-classic/src/classiceditor.ts配置类型定义位于 packages/ckeditor5-core/src/editor/editorconfig.ts可进一步研读以掌握编辑器实例化与数据管线的细节。【免费下载链接】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），仅供参考