CKEditor 5 官方示例导航六种编辑器类型、高级预设与 Framework 级 UI 定制的完整实战指南【免费下载链接】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 官方文档的示例总览页 docs/examples/index.md 展开系统讲解 CKEditor 5 提供的全部内置示例经典、内联、气泡、气泡块、文档与多根六种编辑器类型feature-rich 与协作文档两类高级预设以及基于 CKEditor 5 Framework 的自定义 UI、主题定制与“底部工具栏 按钮分组”等深度定制案例。读完后你将能够选型合适的编辑器类型、复制可运行的配置代码并掌握通过 UI 组件库改造工具栏位置与交互的源码级方法。示例体系总览三类入口覆盖全部使用场景CKEditor 5 的官方示例分为三个层次分别对应“开箱即用”“能力展示”“深度定制”三种集成诉求编辑器类型Editor types展示 CKEditor 5 内置的几种富文本编辑器类型覆盖最常见的编辑使用场景且均可轻松安装部署高级预设Advanced presets展示一个“尽可能多地装配插件”的 feature-rich 编辑器以及一个模拟主流在线文档协作体验的 collaborative document editor高级配置Advanced configuration基于 CKEditor 5 Framework 的通用组件能力构建自定义 UI、自定义主题或改造现有编辑器如带 提及 的聊天界面的示例。这三个层次恰好对应仓库中三个编辑器类型的包结构内置编辑器位于 packages/ckeditor5-editor-classic、packages/ckeditor5-editor-inline、packages/ckeditor5-editor-balloon而文档编辑器与底部工具栏等解耦型示例则构建在 packages/ckeditor5-editor-decoupled 的DecoupledEditor之上。编辑器类型六种内置编辑形态经典编辑器Classic Editor经典编辑器展示一个“盒状编辑区 固定工具栏”的组合工具栏放置在页面上指定位置是传统内容创作最熟悉的形态。其实现入口为 ClassicEditor。该类型的完整示例见 docs/examples/builds/classic-editor.md。内联编辑器Inline Editor内联编辑器允许你直接在目标位置创作内容配有一个浮动工具栏当可编辑文本获得焦点时工具栏随之出现。示例文档中特别说明此示例修改了“图片样式image styles”配置启用了左对齐与右对齐的图片。其实现入口为 InlineEditor完整示例见 docs/examples/builds/inline-editor.md。气泡编辑器Balloon Editor气泡编辑器同样直接在目标位置编辑内容区别在于它使用“气泡工具栏”——该工具栏出现在所选中的可编辑文档元素旁边适合围绕某个具体对象如某段文字、某个区块提供上下文操作。其实现入口为 BalloonEditor完整示例见 docs/examples/builds/balloon-editor.md。气泡块编辑器Balloon Block Editor气泡块编辑器在气泡编辑器基础上提供两套工具栏完整示例见 docs/examples/builds/balloon-block-editor.md气泡工具栏出现在所选中的可编辑文档元素旁边提供内联内容格式化工具块工具栏block toolbar通过附着在可编辑内容区域上、并跟随文档选区移动的“拖拽指示器Drag indicator”按钮访问提供块级格式化工具。该按钮同时也是拖拽手柄可用于在内容中拖放移动区块。文档编辑器Document Editor文档编辑器是一个预设提供类似原生文字处理软件Word 类的编辑体验最适合创建最终会打印或导出为 PDF 的文档。它基于DecoupledEditor构建文档同时建议配合框架教程了解如何在自定义 UI 布局上创建这类编辑器。完整示例见 docs/examples/builds/document-editor.md。多根编辑器Multi-Root Editor多根编辑器类型具有多个相互独立的可编辑区域。它与“页面上放多个独立编辑器如内联编辑器演示”的核心区别在于所有可编辑区域都属于同一个编辑器实例共享同一份配置、同一个工具栏和同一个撤销undo栈并共同产生一份文档。完整示例见 docs/examples/builds/multi-root-editor.md其实现入口为 MultiRootEditor。编辑器实例化配置示例中MultiRootEditor.create()的核心结构如下源自示例文档的完整配置脚本import { MultiRootEditor, Essentials, Bold, Italic, Heading, Link, Table, MediaEmbed, List, Indent } from ckeditor5; import ckeditor5/ckeditor5.css; MultiRootEditor .create( { licenseKey: GPL, // Or YOUR_LICENSE_KEY. plugins: [ Essentials, Heading, Bold, Italic, Link, Table, MediaEmbed, List, Indent ], toolbar: { items: [ undo, redo, |, heading, |, bold, italic, |, link, insertTable, mediaEmbed, |, bulletedList, numberedList, outdent, indent ] }, roots: { header: { element: document.querySelector( #header ), }, content: { element: document.querySelector( #content ), }, leftSide: { element: document.querySelector( #left-side ), }, rightSide: { element: document.querySelector( #right-side ) } } } ) .then( editor { window.editor editor; // Append toolbar to a proper container. const toolbarContainer document.querySelector( #toolbar ); toolbarContainer.appendChild( editor.ui.view.toolbar.element ); // Make toolbar sticky when the editor is focused. editor.ui.focusTracker.on( change:isFocused, () { if ( editor.ui.focusTracker.isFocused ) { toolbarContainer.classList.add( sticky ); } else { toolbarContainer.classList.remove( sticky ); } } ); } ) .catch( error { console.error( There was a problem initializing the editor., error ); } );参数要点licenseKey传入GPL或你的商业授权密钥plugins装配所需的编辑器插件Essentials、Heading、Bold 等toolbar.items主工具栏按顺序排列的按钮 ID|表示分隔线roots这是多根编辑器的关键配置——每个根root通过element指向页面上一个 DOM 元素本例定义了header、content、leftSide、rightSide四个根分别对应标题、正文、左右两个并排侧栏。初始化后代码将editor.ui.view.toolbar.element追加到#toolbar容器中并通过监听editor.ui.focusTracker的change:isFocused事件在编辑器获得焦点时为工具栏容器添加sticky类使其在滚动时吸顶显示。HTML 结构中的光标处理细节示例的 HTML 结构给出了一个重要的实操细节将编辑区结构包在一对contenteditabletruecontenteditablefalse元素之中这是为了在使用方向键位于可编辑区域开头或末尾时提供正确的光标处理——允许用户在多个可编辑区域之间用方向键移动光标。如果不需要这种跨区域移动光标的能力可以省略这对包裹元素div idtoolbar/div !-- Wrapping the structure inside a pair of contenteditabletrue contenteditablefalse elements is required to provide proper caret handling when using arrow keys at the start and end of an editable area. You can skip them if you dont want to move the caret between editable areas using arrow keys. -- div contenteditabletrue div contenteditablefalse div classeditor div idheaderHeader content is inserted here./div /div div classeditor div idcontentMain content is inserted here./div /div div classboxes div classbox box-left editor div idleft-sideLeft-side box content is inserted here./div /div div classbox box-right editor div idright-sideRight-side box content is inserted here./div /div /div /div /div配套的 CSS 中还有两处针对性设计.box .ck-editor__editable { height: 100% }让可编辑区“撑满”整个盒子使整个盒子可点击且一侧增长时另一侧盒子也随之增高#toolbar.sticky { position: sticky; top: 0px; z-index: 10; }实现前述的吸顶工具栏效果。数据设置与读取的差异多根编辑器的数据读写方式与其他编辑器类型不同设置数据——editor.setData()需要传入一个“按根名分键的对象”editor.setData( { header: pContent for header part./p, content: pContent for main part./p, leftSide: pContent for left-side box./p, rightSide: pContent for right-side box./p } );或者通过config.roots.root name.initialData在创建时初始化每个根MultiRootEditor.create( { roots: { header: { initialData: pContent for header part./p, element: document.querySelector( #header ) }, content: { initialData: pContent for main part./p, element: document.querySelector( #content ) }, leftSide: { initialData: pContent for left-side box./p, element: document.querySelector( #left-side ) }, rightSide: { initialData: pContent for right-side box./p, element: document.querySelector( #right-side ) } } } );读取数据——editor.getData()需要指定根名editor.getData( { rootName: leftSide } ); // - pContent for left-side box./p高级预设feature-rich 编辑器与协作文档编辑器CKEditor 5 是一个为协作而生的可配置框架你可以构建任意类型的自定义编辑器装配广泛的功能集和所需的工具栏形态让多位作者轻松地在同一份富文本文档上协同工作。官方示例提供了两个代表Feature-rich editor功能完备编辑器尽可能多地装配可用的插件用于直观展示框架的功能边界与组合能力见 docs/examples/builds/full-featured-editor.mdCollaborative document editor协作文档编辑器将主流在线文档编辑产品实时协同、在线编辑体验的编辑体验带入 CKEditor 5见 docs/examples/builds/collaborative-document-editor.md。这两个预设的定位是“能力展示 即取即用的起点”前者回答“这个框架最多能装什么”后者回答“多人实时协作场景下长什么样”。高级配置基于 CKEditor 5 Framework 的定制示例CKEditor 5 Framework 是一个高度灵活、通用的平台提供一套组件允许你创建任意种类的富文本编辑器。它对集成方integrators开放三类定制路径自定义 UI构建与默认界面不同的自定义界面主题定制theme customization为编辑器配置契合自身产品视觉的主题改造现有编辑器提供定制既有编辑器的工具文档以“带 提及mentions的聊天界面”作为典型案例展示如何在现有编辑器基础上叠加新功能UI 灵活性的直观展示即下一节详解的底部工具栏示例。底部工具栏与按钮分组示例docs/examples/custom/bottom-toolbar-editor.md 展示了上述 UI 灵活性的一个完整组合主工具栏显示在编辑窗口底部且文本格式类按钮被收纳进一个自定义的 “Formatting options” 下拉菜单中。文档指出这种“先创作、后偶尔格式化”的界面形态最适合邮件应用、论坛回帖编辑器、聊天与即时通讯等场景——类似的 UI 布局在 Gmail、Slack、Zendesk 等流行应用中都能见到。核心实现一用 DecoupledEditor 把工具栏注入编辑区之后该示例使用DecoupledEditor将主工具栏注入到编辑根元素之后的 DOM 位置从而把工具栏“搬”到编辑区底部。页面结构非常简洁div ideditor div ideditor-content Editor content is inserted here. /div div ideditor-toolbar-container/div /div初始化完成后将editor.ui.view.toolbar.element追加到底部容器即可DecoupledEditor .create( { root: { element: document.querySelector( #editor-content ), }, licenseKey: GPL, // Or YOUR_LICENSE_KEY. plugins: [ Alignment, Autoformat, BlockQuote, Bold, Essentials, Font, Heading, HorizontalLine, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, List, MediaEmbed, Paragraph, RemoveFormat, Strikethrough, Subscript, Superscript, Table, TableToolbar, Underline, FormattingOptions ], toolbar: [ undo, redo, |, formattingOptions, |, link, blockQuote, uploadImage, insertTable, mediaEmbed, horizontalLine, |, { label: Lists, icon: false, items: [ bulletedList, numberedList, |, outdent, indent ] } ], // Configuration of the formatting dropdown. formattingOptions: [ undo, redo, |, fontFamily, fontSize, fontColor, fontBackgroundColor, |, bold, italic, underline, strikethrough, |, alignment, |, bulletedList, numberedList, |, outdent, indent, |, removeFormat ], image: { resizeUnit: px, toolbar: [ imageStyle:inline, imageStyle:wrapText, imageStyle:breakText, |, toggleImageCaption, imageTextAlternative ] }, table: { contentToolbar: [ tableColumn, tableRow, mergeTableCells ] } } ) .then( editor { const toolbarContainer document.querySelector( #editor-toolbar-container ); toolbarContainer.appendChild( editor.ui.view.toolbar.element ); overrideDropdownPositionsToNorth( editor, editor.ui.view.toolbar ); overrideDropdownPositionsToNorth( editor, editor.plugins.get( FormattingOptions ).toolbarView ); overrideTooltipPositions( editor.ui.view.toolbar ); overrideTooltipPositions( editor.plugins.get( FormattingOptions ).toolbarView ); } );配置要点toolbar中除按钮 ID 外还支持内联分组对象如Lists分组即框架内置的工具栏分组能力不写插件也能收纳按钮formattingOptions数组是自定义插件读取的“下拉菜单内容配置”image.toolbar与table.contentToolbar分别定制了图片气泡工具栏与表格内容工具栏文档同时提示下拉菜单内的按钮收纳效果也可以用内置的 toolbar 分组选项nested toolbars达到无需从零实现。核心实现二自定义 “Formatting options” 下拉组件示例自定义了一个FormattingOptions插件通过editor.ui.componentFactory.add( formattingOptions, ... )注册一个工具栏组件由以下 UI 视图类拼装均可从ckeditor5包直接导入DropdownButtonViewDropdownPanelViewDropdownView构成下拉按钮与面板ToolbarView下拉面板内的工具栏通过fillFromConfig( editor.config.get( formattingOptions ), editor.ui.componentFactory )按配置填充按钮。其中体现可访问性a11y与交互细节的实现值得参考// Accessibility: Give the toolbar a human-readable ARIA label. toolbarView.set( { ariaLabel: t( Formatting options toolbar ) } ); // 下拉面板已打开时ArrowDown 应聚焦面板第一个子元素 dropdownView.keystrokes.set( arrowdown, ( data, cancel ) { if ( dropdownView.isOpen ) { toolbarView.focus(); cancel(); } } ); // 防止误关闭点击下拉自身、任意编辑根或 body 中的浮动 UI 时不关闭 dropdownView.on( render, () { clickOutsideHandler( { emitter: dropdownView, activator: () dropdownView.isOpen, callback: () { dropdownView.isOpen false; }, contextElements: [ dropdownView.element, ...[ ...editor.ui.getEditableElementsNames() ].map( name editor.ui.getEditableElement( name ) ), editor.ui.view.body.bodyCollectionContainer ] } ); } ); // 主按钮状态与下拉打开状态绑定 buttonView.bind( isOn ).to( dropdownView, isOpen ); buttonView.bind( isEnabled ).to( dropdownView ); buttonView.set( { tooltip: t( Formatting options ), icon: fontColorIcon() } );核心实现三面板与 tooltip 朝上弹出的位置覆盖工具栏位于编辑区底部后所有下拉面板和 tooltip 需要改为向上弹出示例通过两个工具函数实现原文档给出的完整实现/** * 强制所有工具栏下拉面板优先使用“北侧”位置编辑器默认为南侧 * 以相对底部工具栏正确弹出。 */ function overrideDropdownPositionsToNorth( editor, toolbarView ) { const { south, north, southEast, southWest, northEast, northWest, southMiddleEast, southMiddleWest, northMiddleEast, northMiddleWest } DropdownView.defaultPanelPositions; let panelPositions; if ( editor.locale.uiLanguageDirection ! rtl ) { panelPositions [ northEast, northWest, northMiddleEast, northMiddleWest, north, southEast, southWest, southMiddleEast, southMiddleWest, south ]; } else { panelPositions [ northWest, northEast, northMiddleWest, northMiddleEast, north, southWest, southEast, southMiddleWest, southMiddleEast, south ]; } for ( const item of toolbarView.items ) { if ( !( item instanceof DropdownView ) ) { continue; } item.on( change:isOpen, () { if ( !item.isOpen ) { return; } item.panelView.position DropdownView._getOptimalPosition( { element: item.panelView.element, target: item.buttonView.element, fitInViewport: true, positions: panelPositions } ).name; } ); } } /** * 强制所有工具栏项的 tooltip 朝北显示。 */ function overrideTooltipPositions( toolbarView ) { for ( const item of toolbarView.items ) { if ( item.buttonView ) { item.buttonView.tooltipPosition n; } else if ( item.tooltipPosition ) { item.tooltipPosition n; } } }从源码结构看这里体现了 CKEditor 5 UI 框架的几个底层机制DropdownView.defaultPanelPositions暴露了全部可选的面板方位常量_getOptimalPosition()会基于视口适配fitInViewport: true在给定候选位置中挑选最优解代码还专门对 RTL从右到左语言环境交换了 east/west 方位的优先级保证阿拉伯语、希伯来语等界面下的弹出方向同样合理。tooltip 侧则直接写入buttonView.tooltipPosition n。配套的 CSS 负责视觉缝合去掉底部工具栏的上边框与上圆角#editor-toolbar-container .ck.ck-toolbar并移除编辑区底部圆角#editor-content使“编辑区 底部工具栏”在视觉上成为一个整体。从示例到落地示例的使用方式与配套资源每个编辑器类型示例页如 classic、inline都以内嵌的交互式 snippet 呈现真实可操作的编辑器并附有两个后续路径查看该预设的完整源码或使用官方交互式 Builder 构建自定义编辑器配置多根编辑器示例在文档中标注了 premium 徽章其完整配置、HTML 结构与数据读写差异均收录在 docs/examples/builds/multi-root-editor.md实现源码位于 packages/ckeditor5-editor-multi-root各编辑器类型的框架级差异UI 视图构成、工具栏绑定方式可以在对应的编辑器包中查证例如 packages/ckeditor5-editor-classic、packages/ckeditor5-editor-inline、packages/ckeditor5-editor-balloon、packages/ckeditor5-editor-decoupled若要进一步深入框架原理插件体系、编辑引擎、UI 组件库可继续阅读 docs/framework/architecture/plugins.md、docs/framework/architecture/ui-components.md 与 docs/framework/architecture/ui-library.md。小结CKEditor 5 的示例体系以“编辑器类型 → 高级预设 → Framework 级定制”的递进结构覆盖了从快速集成到深度定制的完整路径六种编辑器类型classic / inline / balloon / balloon-block / document / multi-root解决“编辑区与工具栏如何布局”的问题feature-rich 与 collaborative 预设展示框架的功能上限与协作场景而底部工具栏示例则用DecoupledEditor的工具栏注入、自定义下拉组件、面板/tooltip 方位覆盖三段可复制的代码证明了 UI 框架在保留编辑器内核不变的前提下对界面形态拥有完全的可编程控制力。【免费下载链接】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），仅供参考
CKEditor 5 官方示例导航：六种编辑器类型、高级预设与 Framework 级 UI 定制的完整实战指南
CKEditor 5 官方示例导航六种编辑器类型、高级预设与 Framework 级 UI 定制的完整实战指南【免费下载链接】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 官方文档的示例总览页 docs/examples/index.md 展开系统讲解 CKEditor 5 提供的全部内置示例经典、内联、气泡、气泡块、文档与多根六种编辑器类型feature-rich 与协作文档两类高级预设以及基于 CKEditor 5 Framework 的自定义 UI、主题定制与“底部工具栏 按钮分组”等深度定制案例。读完后你将能够选型合适的编辑器类型、复制可运行的配置代码并掌握通过 UI 组件库改造工具栏位置与交互的源码级方法。示例体系总览三类入口覆盖全部使用场景CKEditor 5 的官方示例分为三个层次分别对应“开箱即用”“能力展示”“深度定制”三种集成诉求编辑器类型Editor types展示 CKEditor 5 内置的几种富文本编辑器类型覆盖最常见的编辑使用场景且均可轻松安装部署高级预设Advanced presets展示一个“尽可能多地装配插件”的 feature-rich 编辑器以及一个模拟主流在线文档协作体验的 collaborative document editor高级配置Advanced configuration基于 CKEditor 5 Framework 的通用组件能力构建自定义 UI、自定义主题或改造现有编辑器如带 提及 的聊天界面的示例。这三个层次恰好对应仓库中三个编辑器类型的包结构内置编辑器位于 packages/ckeditor5-editor-classic、packages/ckeditor5-editor-inline、packages/ckeditor5-editor-balloon而文档编辑器与底部工具栏等解耦型示例则构建在 packages/ckeditor5-editor-decoupled 的DecoupledEditor之上。编辑器类型六种内置编辑形态经典编辑器Classic Editor经典编辑器展示一个“盒状编辑区 固定工具栏”的组合工具栏放置在页面上指定位置是传统内容创作最熟悉的形态。其实现入口为 ClassicEditor。该类型的完整示例见 docs/examples/builds/classic-editor.md。内联编辑器Inline Editor内联编辑器允许你直接在目标位置创作内容配有一个浮动工具栏当可编辑文本获得焦点时工具栏随之出现。示例文档中特别说明此示例修改了“图片样式image styles”配置启用了左对齐与右对齐的图片。其实现入口为 InlineEditor完整示例见 docs/examples/builds/inline-editor.md。气泡编辑器Balloon Editor气泡编辑器同样直接在目标位置编辑内容区别在于它使用“气泡工具栏”——该工具栏出现在所选中的可编辑文档元素旁边适合围绕某个具体对象如某段文字、某个区块提供上下文操作。其实现入口为 BalloonEditor完整示例见 docs/examples/builds/balloon-editor.md。气泡块编辑器Balloon Block Editor气泡块编辑器在气泡编辑器基础上提供两套工具栏完整示例见 docs/examples/builds/balloon-block-editor.md气泡工具栏出现在所选中的可编辑文档元素旁边提供内联内容格式化工具块工具栏block toolbar通过附着在可编辑内容区域上、并跟随文档选区移动的“拖拽指示器Drag indicator”按钮访问提供块级格式化工具。该按钮同时也是拖拽手柄可用于在内容中拖放移动区块。文档编辑器Document Editor文档编辑器是一个预设提供类似原生文字处理软件Word 类的编辑体验最适合创建最终会打印或导出为 PDF 的文档。它基于DecoupledEditor构建文档同时建议配合框架教程了解如何在自定义 UI 布局上创建这类编辑器。完整示例见 docs/examples/builds/document-editor.md。多根编辑器Multi-Root Editor多根编辑器类型具有多个相互独立的可编辑区域。它与“页面上放多个独立编辑器如内联编辑器演示”的核心区别在于所有可编辑区域都属于同一个编辑器实例共享同一份配置、同一个工具栏和同一个撤销undo栈并共同产生一份文档。完整示例见 docs/examples/builds/multi-root-editor.md其实现入口为 MultiRootEditor。编辑器实例化配置示例中MultiRootEditor.create()的核心结构如下源自示例文档的完整配置脚本import { MultiRootEditor, Essentials, Bold, Italic, Heading, Link, Table, MediaEmbed, List, Indent } from ckeditor5; import ckeditor5/ckeditor5.css; MultiRootEditor .create( { licenseKey: GPL, // Or YOUR_LICENSE_KEY. plugins: [ Essentials, Heading, Bold, Italic, Link, Table, MediaEmbed, List, Indent ], toolbar: { items: [ undo, redo, |, heading, |, bold, italic, |, link, insertTable, mediaEmbed, |, bulletedList, numberedList, outdent, indent ] }, roots: { header: { element: document.querySelector( #header ), }, content: { element: document.querySelector( #content ), }, leftSide: { element: document.querySelector( #left-side ), }, rightSide: { element: document.querySelector( #right-side ) } } } ) .then( editor { window.editor editor; // Append toolbar to a proper container. const toolbarContainer document.querySelector( #toolbar ); toolbarContainer.appendChild( editor.ui.view.toolbar.element ); // Make toolbar sticky when the editor is focused. editor.ui.focusTracker.on( change:isFocused, () { if ( editor.ui.focusTracker.isFocused ) { toolbarContainer.classList.add( sticky ); } else { toolbarContainer.classList.remove( sticky ); } } ); } ) .catch( error { console.error( There was a problem initializing the editor., error ); } );参数要点licenseKey传入GPL或你的商业授权密钥plugins装配所需的编辑器插件Essentials、Heading、Bold 等toolbar.items主工具栏按顺序排列的按钮 ID|表示分隔线roots这是多根编辑器的关键配置——每个根root通过element指向页面上一个 DOM 元素本例定义了header、content、leftSide、rightSide四个根分别对应标题、正文、左右两个并排侧栏。初始化后代码将editor.ui.view.toolbar.element追加到#toolbar容器中并通过监听editor.ui.focusTracker的change:isFocused事件在编辑器获得焦点时为工具栏容器添加sticky类使其在滚动时吸顶显示。HTML 结构中的光标处理细节示例的 HTML 结构给出了一个重要的实操细节将编辑区结构包在一对contenteditabletruecontenteditablefalse元素之中这是为了在使用方向键位于可编辑区域开头或末尾时提供正确的光标处理——允许用户在多个可编辑区域之间用方向键移动光标。如果不需要这种跨区域移动光标的能力可以省略这对包裹元素div idtoolbar/div !-- Wrapping the structure inside a pair of contenteditabletrue contenteditablefalse elements is required to provide proper caret handling when using arrow keys at the start and end of an editable area. You can skip them if you dont want to move the caret between editable areas using arrow keys. -- div contenteditabletrue div contenteditablefalse div classeditor div idheaderHeader content is inserted here./div /div div classeditor div idcontentMain content is inserted here./div /div div classboxes div classbox box-left editor div idleft-sideLeft-side box content is inserted here./div /div div classbox box-right editor div idright-sideRight-side box content is inserted here./div /div /div /div /div配套的 CSS 中还有两处针对性设计.box .ck-editor__editable { height: 100% }让可编辑区“撑满”整个盒子使整个盒子可点击且一侧增长时另一侧盒子也随之增高#toolbar.sticky { position: sticky; top: 0px; z-index: 10; }实现前述的吸顶工具栏效果。数据设置与读取的差异多根编辑器的数据读写方式与其他编辑器类型不同设置数据——editor.setData()需要传入一个“按根名分键的对象”editor.setData( { header: pContent for header part./p, content: pContent for main part./p, leftSide: pContent for left-side box./p, rightSide: pContent for right-side box./p } );或者通过config.roots.root name.initialData在创建时初始化每个根MultiRootEditor.create( { roots: { header: { initialData: pContent for header part./p, element: document.querySelector( #header ) }, content: { initialData: pContent for main part./p, element: document.querySelector( #content ) }, leftSide: { initialData: pContent for left-side box./p, element: document.querySelector( #left-side ) }, rightSide: { initialData: pContent for right-side box./p, element: document.querySelector( #right-side ) } } } );读取数据——editor.getData()需要指定根名editor.getData( { rootName: leftSide } ); // - pContent for left-side box./p高级预设feature-rich 编辑器与协作文档编辑器CKEditor 5 是一个为协作而生的可配置框架你可以构建任意类型的自定义编辑器装配广泛的功能集和所需的工具栏形态让多位作者轻松地在同一份富文本文档上协同工作。官方示例提供了两个代表Feature-rich editor功能完备编辑器尽可能多地装配可用的插件用于直观展示框架的功能边界与组合能力见 docs/examples/builds/full-featured-editor.mdCollaborative document editor协作文档编辑器将主流在线文档编辑产品实时协同、在线编辑体验的编辑体验带入 CKEditor 5见 docs/examples/builds/collaborative-document-editor.md。这两个预设的定位是“能力展示 即取即用的起点”前者回答“这个框架最多能装什么”后者回答“多人实时协作场景下长什么样”。高级配置基于 CKEditor 5 Framework 的定制示例CKEditor 5 Framework 是一个高度灵活、通用的平台提供一套组件允许你创建任意种类的富文本编辑器。它对集成方integrators开放三类定制路径自定义 UI构建与默认界面不同的自定义界面主题定制theme customization为编辑器配置契合自身产品视觉的主题改造现有编辑器提供定制既有编辑器的工具文档以“带 提及mentions的聊天界面”作为典型案例展示如何在现有编辑器基础上叠加新功能UI 灵活性的直观展示即下一节详解的底部工具栏示例。底部工具栏与按钮分组示例docs/examples/custom/bottom-toolbar-editor.md 展示了上述 UI 灵活性的一个完整组合主工具栏显示在编辑窗口底部且文本格式类按钮被收纳进一个自定义的 “Formatting options” 下拉菜单中。文档指出这种“先创作、后偶尔格式化”的界面形态最适合邮件应用、论坛回帖编辑器、聊天与即时通讯等场景——类似的 UI 布局在 Gmail、Slack、Zendesk 等流行应用中都能见到。核心实现一用 DecoupledEditor 把工具栏注入编辑区之后该示例使用DecoupledEditor将主工具栏注入到编辑根元素之后的 DOM 位置从而把工具栏“搬”到编辑区底部。页面结构非常简洁div ideditor div ideditor-content Editor content is inserted here. /div div ideditor-toolbar-container/div /div初始化完成后将editor.ui.view.toolbar.element追加到底部容器即可DecoupledEditor .create( { root: { element: document.querySelector( #editor-content ), }, licenseKey: GPL, // Or YOUR_LICENSE_KEY. plugins: [ Alignment, Autoformat, BlockQuote, Bold, Essentials, Font, Heading, HorizontalLine, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, List, MediaEmbed, Paragraph, RemoveFormat, Strikethrough, Subscript, Superscript, Table, TableToolbar, Underline, FormattingOptions ], toolbar: [ undo, redo, |, formattingOptions, |, link, blockQuote, uploadImage, insertTable, mediaEmbed, horizontalLine, |, { label: Lists, icon: false, items: [ bulletedList, numberedList, |, outdent, indent ] } ], // Configuration of the formatting dropdown. formattingOptions: [ undo, redo, |, fontFamily, fontSize, fontColor, fontBackgroundColor, |, bold, italic, underline, strikethrough, |, alignment, |, bulletedList, numberedList, |, outdent, indent, |, removeFormat ], image: { resizeUnit: px, toolbar: [ imageStyle:inline, imageStyle:wrapText, imageStyle:breakText, |, toggleImageCaption, imageTextAlternative ] }, table: { contentToolbar: [ tableColumn, tableRow, mergeTableCells ] } } ) .then( editor { const toolbarContainer document.querySelector( #editor-toolbar-container ); toolbarContainer.appendChild( editor.ui.view.toolbar.element ); overrideDropdownPositionsToNorth( editor, editor.ui.view.toolbar ); overrideDropdownPositionsToNorth( editor, editor.plugins.get( FormattingOptions ).toolbarView ); overrideTooltipPositions( editor.ui.view.toolbar ); overrideTooltipPositions( editor.plugins.get( FormattingOptions ).toolbarView ); } );配置要点toolbar中除按钮 ID 外还支持内联分组对象如Lists分组即框架内置的工具栏分组能力不写插件也能收纳按钮formattingOptions数组是自定义插件读取的“下拉菜单内容配置”image.toolbar与table.contentToolbar分别定制了图片气泡工具栏与表格内容工具栏文档同时提示下拉菜单内的按钮收纳效果也可以用内置的 toolbar 分组选项nested toolbars达到无需从零实现。核心实现二自定义 “Formatting options” 下拉组件示例自定义了一个FormattingOptions插件通过editor.ui.componentFactory.add( formattingOptions, ... )注册一个工具栏组件由以下 UI 视图类拼装均可从ckeditor5包直接导入DropdownButtonViewDropdownPanelViewDropdownView构成下拉按钮与面板ToolbarView下拉面板内的工具栏通过fillFromConfig( editor.config.get( formattingOptions ), editor.ui.componentFactory )按配置填充按钮。其中体现可访问性a11y与交互细节的实现值得参考// Accessibility: Give the toolbar a human-readable ARIA label. toolbarView.set( { ariaLabel: t( Formatting options toolbar ) } ); // 下拉面板已打开时ArrowDown 应聚焦面板第一个子元素 dropdownView.keystrokes.set( arrowdown, ( data, cancel ) { if ( dropdownView.isOpen ) { toolbarView.focus(); cancel(); } } ); // 防止误关闭点击下拉自身、任意编辑根或 body 中的浮动 UI 时不关闭 dropdownView.on( render, () { clickOutsideHandler( { emitter: dropdownView, activator: () dropdownView.isOpen, callback: () { dropdownView.isOpen false; }, contextElements: [ dropdownView.element, ...[ ...editor.ui.getEditableElementsNames() ].map( name editor.ui.getEditableElement( name ) ), editor.ui.view.body.bodyCollectionContainer ] } ); } ); // 主按钮状态与下拉打开状态绑定 buttonView.bind( isOn ).to( dropdownView, isOpen ); buttonView.bind( isEnabled ).to( dropdownView ); buttonView.set( { tooltip: t( Formatting options ), icon: fontColorIcon() } );核心实现三面板与 tooltip 朝上弹出的位置覆盖工具栏位于编辑区底部后所有下拉面板和 tooltip 需要改为向上弹出示例通过两个工具函数实现原文档给出的完整实现/** * 强制所有工具栏下拉面板优先使用“北侧”位置编辑器默认为南侧 * 以相对底部工具栏正确弹出。 */ function overrideDropdownPositionsToNorth( editor, toolbarView ) { const { south, north, southEast, southWest, northEast, northWest, southMiddleEast, southMiddleWest, northMiddleEast, northMiddleWest } DropdownView.defaultPanelPositions; let panelPositions; if ( editor.locale.uiLanguageDirection ! rtl ) { panelPositions [ northEast, northWest, northMiddleEast, northMiddleWest, north, southEast, southWest, southMiddleEast, southMiddleWest, south ]; } else { panelPositions [ northWest, northEast, northMiddleWest, northMiddleEast, north, southWest, southEast, southMiddleWest, southMiddleEast, south ]; } for ( const item of toolbarView.items ) { if ( !( item instanceof DropdownView ) ) { continue; } item.on( change:isOpen, () { if ( !item.isOpen ) { return; } item.panelView.position DropdownView._getOptimalPosition( { element: item.panelView.element, target: item.buttonView.element, fitInViewport: true, positions: panelPositions } ).name; } ); } } /** * 强制所有工具栏项的 tooltip 朝北显示。 */ function overrideTooltipPositions( toolbarView ) { for ( const item of toolbarView.items ) { if ( item.buttonView ) { item.buttonView.tooltipPosition n; } else if ( item.tooltipPosition ) { item.tooltipPosition n; } } }从源码结构看这里体现了 CKEditor 5 UI 框架的几个底层机制DropdownView.defaultPanelPositions暴露了全部可选的面板方位常量_getOptimalPosition()会基于视口适配fitInViewport: true在给定候选位置中挑选最优解代码还专门对 RTL从右到左语言环境交换了 east/west 方位的优先级保证阿拉伯语、希伯来语等界面下的弹出方向同样合理。tooltip 侧则直接写入buttonView.tooltipPosition n。配套的 CSS 负责视觉缝合去掉底部工具栏的上边框与上圆角#editor-toolbar-container .ck.ck-toolbar并移除编辑区底部圆角#editor-content使“编辑区 底部工具栏”在视觉上成为一个整体。从示例到落地示例的使用方式与配套资源每个编辑器类型示例页如 classic、inline都以内嵌的交互式 snippet 呈现真实可操作的编辑器并附有两个后续路径查看该预设的完整源码或使用官方交互式 Builder 构建自定义编辑器配置多根编辑器示例在文档中标注了 premium 徽章其完整配置、HTML 结构与数据读写差异均收录在 docs/examples/builds/multi-root-editor.md实现源码位于 packages/ckeditor5-editor-multi-root各编辑器类型的框架级差异UI 视图构成、工具栏绑定方式可以在对应的编辑器包中查证例如 packages/ckeditor5-editor-classic、packages/ckeditor5-editor-inline、packages/ckeditor5-editor-balloon、packages/ckeditor5-editor-decoupled若要进一步深入框架原理插件体系、编辑引擎、UI 组件库可继续阅读 docs/framework/architecture/plugins.md、docs/framework/architecture/ui-components.md 与 docs/framework/architecture/ui-library.md。小结CKEditor 5 的示例体系以“编辑器类型 → 高级预设 → Framework 级定制”的递进结构覆盖了从快速集成到深度定制的完整路径六种编辑器类型classic / inline / balloon / balloon-block / document / multi-root解决“编辑区与工具栏如何布局”的问题feature-rich 与 collaborative 预设展示框架的功能上限与协作场景而底部工具栏示例则用DecoupledEditor的工具栏注入、自定义下拉组件、面板/tooltip 方位覆盖三段可复制的代码证明了 UI 框架在保留编辑器内核不变的前提下对界面形态拥有完全的可编程控制力。【免费下载链接】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），仅供参考