在 Vue.js 3 项目中通过 CDN 集成 CKEditor 5 多根Multi-root编辑器【免费下载链接】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 官方 Vue 3 集成包ckeditor/ckeditor5-vue中的CkeditorMultiRoot组件为主线完整讲解如何通过 Cloud CDN 在 Vue 应用中加载并运行多根编辑器从useCKEditorCloud加载 CDN 资源、v-model双向数据绑定与根属性同步到addRoot/removeRoot动态增删编辑区域、标准根与$inlineRoot内联根混合使用等进阶技巧。读完本文你将能够在一个 Vue 3 页面中管理多个彼此独立又共享同一编辑器实例同一撤销栈、同一配置的可编辑区域。本指南仅覆盖多根编辑器在 Vue 中的用法单根编辑器Classic、Decoupled 等请参见 Vue.js 3 默认集成指南。前提条件与实验性说明在开始之前需要明确两点实验性功能Vue 多根编辑器集成目前处于实验阶段其 API 尚未稳定可能在任一版本发布时发生变更不保证遵守主版本号语义化版本规则。版本要求ckeditor/ckeditor5-vue包从8.2.0起才支持多根编辑器。若使用旧版本请先升级。同时需要准备一个 Vue 3 项目。如果还没有可以使用 Vite CLI 创建并可按需选择 TypeScript 模板。Cloud CDN 账号。CKEditor 5 的 Cloud CDN 服务需要先在 CKEditor Portal 目录下的许可证激活说明。快速开始最小可运行示例安装 Vue 集成包从 npm 安装官方 Vue 集成包npm install ckeditor/ckeditor5-vue该包提供了useCKEditorCloud组合式函数以及CkeditorMultiRoot、CkeditorElement、CkeditorMultiRootEditable三个组件。完整组件代码下面是一个可直接放入项目的App.vue完整示例。它的核心思路是先用useCKEditorCloud从 CDN 异步加载 CKEditor 5 与 premium 插件再通过computed将加载结果映射为MultiRootEditor构造函数和编辑器配置最后交给CkeditorMultiRoot渲染!-- App.vue -- template p v-ifcloud.loading.value Loading CKEditor 5 from CDN... /p p v-else-ifcloud.error.value CKEditor 5 could not be loaded from CDN. /p CkeditorMultiRoot v-else-ifeditor config v-modeleditorData v-model:roots-attributeseditorRootsAttributes :editoreditor :configconfig template #default{ editor, roots } CkeditorElement :editoreditor elementmenuBar / CkeditorElement :editoreditor / CkeditorMultiRootEditable v-forrootName in roots :idrootName :keyrootName :root-namerootName :editoreditor / /template /CkeditorMultiRoot /template script setup import { computed, ref } from vue; import { CkeditorElement, CkeditorMultiRoot, CkeditorMultiRootEditable, useCKEditorCloud } from ckeditor/ckeditor5-vue; const cloud useCKEditorCloud( { version: 48.5.0, // 以你实际加载的版本为准当前仓库版本 languages: [ en ], premium: true } ); const editor computed( () { if ( !cloud.data.value ) { return null; } return cloud.data.value.CKEditor.MultiRootEditor; } ); const config computed( () { if ( !cloud.data.value ) { return null; } const { Essentials, Paragraph, Bold, Italic } cloud.data.value.CKEditor; const { FormatPainter } cloud.data.value.CKEditorPremiumFeatures; return { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ], toolbar: [ undo, redo, |, bold, italic, |, formatPainter ] }; } ); const editorData ref( { intro: h1Vue multi-root editor/h1, content: pHello from CKEditor 5 multi-root!/p } ); const editorRootsAttributes ref( { intro: { order: 10 }, content: { order: 20 } } ); /script代码中的关键点拆解useCKEditorCloud({ version, languages, premium })负责向页面head注入所需的script和link标签并保证同一资源只加载一次。返回的cloud.data.value在加载完成后持有CKEditor开源库、CKEditorPremiumFeaturespremium 插件等命名空间cloud.loading、cloud.error分别反映加载中与加载失败状态。更多选项translations、ckbox、plugins、injectedHtmlElementsAttributes等参见 加载 CDN 资源指南。editorData是一个对象而非字符串这是多根编辑器与单根编辑器最直观的区别——每个键对应一个根root键值是该根的初始 HTML 数据。editorRootsAttributes按根维护的初始根属性root attributes通过v-model:roots-attributes与组件双向绑定可用于表达顺序折叠状态等由你的业务功能自行解释的元数据。插槽渲染结构CkeditorElement负责渲染工具栏/菜单栏可传elementmenuBar指定菜单栏CkeditorMultiRootEditable则通过v-forrootName in roots为每个根渲染一个可编辑区域。全局注册组件可选如果项目中有多个组件需要用到多根编辑器也可以全局注册所有 CKEditor 5 Vue 组件import { createApp } from vue; import { CkeditorPlugin } from ckeditor/ckeditor5-vue; import App from ./App.vue; createApp( App ) .use( CkeditorPlugin ) .mount( #app );这样ckeditor、ckeditor-multi-root等组件即可在任何模板中直接使用无需逐个局部导入。CkeditorMultiRoot 组件属性PropsCkeditorMultiRoot组件支持以下属性属性类型说明editorMultiRootEditor必填要使用的MultiRootEditor构造函数从 CDN 加载结果的CKEditor.MultiRootEditor中取得。modelValueObject创建编辑器时的初始数据配合v-model使用多根编辑器的数据是根名 → HTML 字符串的映射对象。rootsAttributesObject创建编辑器时的初始根属性配合v-model:roots-attributes使用。configObject编辑器配置详见 配置指南。disabledBoolean置为true时整个编辑器切换为只读模式。disableWatchdogBoolean置为true时禁用 watchdog 崩溃恢复特性默认false。watchdogConfigWatchdogConfigwatchdog 特性 的配置对象例如允许的最大崩溃次数、崩溃最小间隔等。disableTwoWayDataBindingBoolean是否禁用编辑器与modelValue之间的双向数据绑定以提升性能默认false。组件事件Events组件对外发射以下事件ready— 编辑器就绪时触发回调参数为MultiRootEditor实例若初始化出错后发生重初始化也会再次触发。destroy— 编辑器实例被销毁时触发。change— 编辑器数据变化时触发对应editor.model.document#change:data事件。blur— 编辑器失焦时触发对应editor.editing.view.document#blur。focus— 编辑器聚焦时触发对应editor.editing.view.document#focus。error— 编辑器在初始化或运行期间崩溃时触发接收两个参数错误实例error与错误详情details。input— 编辑器数据变化时触发接收三个参数当前数据、一个EventInfo对象或null、以及MultiRootEditor实例。update:modelValue— 编辑器数据变化时触发用于更新v-model。update:rootsAttributes— 根属性变化时触发用于更新v-model:roots-attributes。error事件携带的details对象包含两个字段phase: initialization | runtime— 标明错误发生在编辑器/上下文初始化期间还是初始化完成后的运行期间。causesRestart: Boolean— 为true表示 watchdog 将尝试重启编辑器。change、blur、focus这三个编辑器事件回调均接收两个参数一个EventInfo对象以及一个MultiRootEditor实例。插槽值Slot ValuesCkeditorMultiRoot的默认插槽暴露以下值editor— 已创建的编辑器实例。roots— 编辑器根名称数组在移除或新增根后会自动更新模板中的v-for依赖它。data— 编辑器当前数据快照每次编辑器更新后刷新。注意如果通过disableTwoWayDataBinding禁用了双向绑定则不应使用该值。attributes— 编辑器根属性的当前快照每次根属性更新后刷新同样在禁用双向绑定时不应使用。rootsAttributes—attributes的别名。addRoot— 在运行时向编辑器新增根的函数。接收一个配置对象name根名、data初始数据、attributes初始根属性、modelElement例如$inlineRoot、editableOptions按根设置element、placeholder、label。返回一个 Promise在根添加完成后 resolve。removeRoot— 按根名从编辑器移除detach根的函数。返回一个 Promise在根移除完成后 resolve。另外两个配套组件的职责CkeditorElement在可编辑区域之外渲染编辑器 UI 元素接受editor属性与可选的element属性取值toolbar或menuBar。CkeditorMultiRootEditable渲染单个可编辑根接受editor、rootName、可选的id与editableOptions属性。双向数据绑定与大数据量优化默认情况下双向数据绑定是开启的用户在编辑器中的每一次改动都会自动同步到v-model绑定的对象根属性同理通过v-model:roots-attributes保持应用状态最新。但双向绑定在大文档场景下可能带来性能问题。官方建议将disableTwoWayDataBinding置为true关闭自动同步关闭后如需同步数据必须自行处理推荐的处理方式是接入 autosave 自动保存插件由插件按防抖策略定时读取数据另一种方式是监听change事件在每次编辑器更新时手动取数。这样既保留了编辑器状态与业务状态一致的最终目标又避免了每次按键都触发大对象深拷贝的性能开销。进阶动态增删根How to?动态添加与移除根默认插槽暴露的addRoot与removeRoot让你可以在事件处理器中随时管理编辑区域。addRoot接受新根的name、初始数据data、可选根属性attributes、用于 schema 的可选modelElement以及描述可编辑元素的editableOptions宿主标签、占位文本、无障碍标签template CkeditorMultiRoot v-modeleditorData :editorMultiRootEditor template #default{ editor, roots, addRoot, removeRoot } button clickaddSidebar( addRoot ) Add sidebar /button button clickremoveRoot( sidebar ) Remove sidebar /button CkeditorElement :editoreditor / CkeditorMultiRootEditable v-forrootName in roots :keyrootName :root-namerootName :editoreditor / /template /CkeditorMultiRoot /template script setup async function addSidebar( addRoot ) { await addRoot( { name: sidebar, data: pSidebar content/p, attributes: { order: 30 }, editableOptions: { element: section, placeholder: Type the sidebar content..., label: Sidebar } } ); } /script其中editableOptions.element字段接受标签名字符串如section、article或一个包含name、classes、styles、attributes的描述符对象用于定制可编辑宿主元素的样式与属性。混合标准根与内联根多根编辑器允许在同一文档中同时存在标准根与内联根。只要为某个根设置modelElement: $inlineRoot该根就只接受行内内容文本、加粗、斜体、链接等而不接受段落、列表这类块级内容。这对标题 正文型布局非常实用——标题根只允许输入纯文本行正文根保持完整的块级能力await addRoot( { name: title, data: Document title, modelElement: $inlineRoot, editableOptions: { element: h1, placeholder: Enter title... } } );注意如果不设置modelElement: $inlineRoot那么即使把宿主元素改成h1也只是换了标签外观schema 仍然允许该根容纳块级内容。底层原理MultiRootEditor 与 roots 配置Vue 组件本质上是对 CKEditor 5MultiRootEditor的封装。仓库中的核心实现位于 packages/ckeditor5-editor-multi-root/src/multirooteditor.ts其类注释明确了设计定位多根编辑器提供多个行内可编辑元素与一个共享工具栏所有可编辑区域都由同一个编辑器实例控制因此它们共享同一份配置、同一文档 ID 与同一撤销栈。该类型编辑器面向需要高度定制 UI 结构、精确控制每个可编辑区域位置的集成场景。几个值得注意的实现细节源码佐证每个根一个模型根元素构造函数中遍历config.roots为每个根调用this.model.document.createRoot( rootConfig.modelElement, rootName )创建模型根。config.roots.rootName的完整类型定义见 packages/ckeditor5-core/src/editor/editorconfig.ts 中的RootConfig接口支持element既有 DOM 元素 / 标签名 / 元素描述符、initialData、placeholder、label、modelElement等字段。addRoot()只注册模型根不创建 DOM源码明确提示addRoot()不会为新增根创建 DOM 可编辑元素需要监听addRoot事件并调用createEditable()来生成并挂载 DOM。Vue 组件正是借助roots插槽值的自动更新完成这一联动因此模板中的CkeditorMultiRootEditable会自动为新根渲染可编辑区域。按根只读MultiRootEditor#disableRoot( rootName, lockId )/enableRoot( rootName, lockId )支持对单个根加只读锁对应 Vue 组件层面整编辑器只读的disabled属性是另一粒度。根属性通过registerRootAttribute注册getRootsAttributes()只返回已注册的根属性未设置的属性返回null——这正是v-model:roots-attributes同步机制的底层数据来源。许可证校验构造函数中会解码licenseKey若许可证不允许多根编辑器MRE特性编辑器会被强制置为只读并提示featureNotAllowed。相关阅读与下一步编辑器的数据读写 API见 Getting and setting data 指南。进一步定制编辑器见 配置Configuration指南。单根场景下的 Vue 集成Classic 等编辑器类型见 Vue.js 3 默认集成指南。useCKEditorCloud/loadCKEditorCloud的完整选项说明见 加载 CDN 资源指南。按功能学习各插件用法见 功能Features目录。【免费下载链接】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），仅供参考
在 Vue.js 3 项目中通过 CDN 集成 CKEditor 5 多根（Multi-root）编辑器
在 Vue.js 3 项目中通过 CDN 集成 CKEditor 5 多根Multi-root编辑器【免费下载链接】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 官方 Vue 3 集成包ckeditor/ckeditor5-vue中的CkeditorMultiRoot组件为主线完整讲解如何通过 Cloud CDN 在 Vue 应用中加载并运行多根编辑器从useCKEditorCloud加载 CDN 资源、v-model双向数据绑定与根属性同步到addRoot/removeRoot动态增删编辑区域、标准根与$inlineRoot内联根混合使用等进阶技巧。读完本文你将能够在一个 Vue 3 页面中管理多个彼此独立又共享同一编辑器实例同一撤销栈、同一配置的可编辑区域。本指南仅覆盖多根编辑器在 Vue 中的用法单根编辑器Classic、Decoupled 等请参见 Vue.js 3 默认集成指南。前提条件与实验性说明在开始之前需要明确两点实验性功能Vue 多根编辑器集成目前处于实验阶段其 API 尚未稳定可能在任一版本发布时发生变更不保证遵守主版本号语义化版本规则。版本要求ckeditor/ckeditor5-vue包从8.2.0起才支持多根编辑器。若使用旧版本请先升级。同时需要准备一个 Vue 3 项目。如果还没有可以使用 Vite CLI 创建并可按需选择 TypeScript 模板。Cloud CDN 账号。CKEditor 5 的 Cloud CDN 服务需要先在 CKEditor Portal 目录下的许可证激活说明。快速开始最小可运行示例安装 Vue 集成包从 npm 安装官方 Vue 集成包npm install ckeditor/ckeditor5-vue该包提供了useCKEditorCloud组合式函数以及CkeditorMultiRoot、CkeditorElement、CkeditorMultiRootEditable三个组件。完整组件代码下面是一个可直接放入项目的App.vue完整示例。它的核心思路是先用useCKEditorCloud从 CDN 异步加载 CKEditor 5 与 premium 插件再通过computed将加载结果映射为MultiRootEditor构造函数和编辑器配置最后交给CkeditorMultiRoot渲染!-- App.vue -- template p v-ifcloud.loading.value Loading CKEditor 5 from CDN... /p p v-else-ifcloud.error.value CKEditor 5 could not be loaded from CDN. /p CkeditorMultiRoot v-else-ifeditor config v-modeleditorData v-model:roots-attributeseditorRootsAttributes :editoreditor :configconfig template #default{ editor, roots } CkeditorElement :editoreditor elementmenuBar / CkeditorElement :editoreditor / CkeditorMultiRootEditable v-forrootName in roots :idrootName :keyrootName :root-namerootName :editoreditor / /template /CkeditorMultiRoot /template script setup import { computed, ref } from vue; import { CkeditorElement, CkeditorMultiRoot, CkeditorMultiRootEditable, useCKEditorCloud } from ckeditor/ckeditor5-vue; const cloud useCKEditorCloud( { version: 48.5.0, // 以你实际加载的版本为准当前仓库版本 languages: [ en ], premium: true } ); const editor computed( () { if ( !cloud.data.value ) { return null; } return cloud.data.value.CKEditor.MultiRootEditor; } ); const config computed( () { if ( !cloud.data.value ) { return null; } const { Essentials, Paragraph, Bold, Italic } cloud.data.value.CKEditor; const { FormatPainter } cloud.data.value.CKEditorPremiumFeatures; return { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ], toolbar: [ undo, redo, |, bold, italic, |, formatPainter ] }; } ); const editorData ref( { intro: h1Vue multi-root editor/h1, content: pHello from CKEditor 5 multi-root!/p } ); const editorRootsAttributes ref( { intro: { order: 10 }, content: { order: 20 } } ); /script代码中的关键点拆解useCKEditorCloud({ version, languages, premium })负责向页面head注入所需的script和link标签并保证同一资源只加载一次。返回的cloud.data.value在加载完成后持有CKEditor开源库、CKEditorPremiumFeaturespremium 插件等命名空间cloud.loading、cloud.error分别反映加载中与加载失败状态。更多选项translations、ckbox、plugins、injectedHtmlElementsAttributes等参见 加载 CDN 资源指南。editorData是一个对象而非字符串这是多根编辑器与单根编辑器最直观的区别——每个键对应一个根root键值是该根的初始 HTML 数据。editorRootsAttributes按根维护的初始根属性root attributes通过v-model:roots-attributes与组件双向绑定可用于表达顺序折叠状态等由你的业务功能自行解释的元数据。插槽渲染结构CkeditorElement负责渲染工具栏/菜单栏可传elementmenuBar指定菜单栏CkeditorMultiRootEditable则通过v-forrootName in roots为每个根渲染一个可编辑区域。全局注册组件可选如果项目中有多个组件需要用到多根编辑器也可以全局注册所有 CKEditor 5 Vue 组件import { createApp } from vue; import { CkeditorPlugin } from ckeditor/ckeditor5-vue; import App from ./App.vue; createApp( App ) .use( CkeditorPlugin ) .mount( #app );这样ckeditor、ckeditor-multi-root等组件即可在任何模板中直接使用无需逐个局部导入。CkeditorMultiRoot 组件属性PropsCkeditorMultiRoot组件支持以下属性属性类型说明editorMultiRootEditor必填要使用的MultiRootEditor构造函数从 CDN 加载结果的CKEditor.MultiRootEditor中取得。modelValueObject创建编辑器时的初始数据配合v-model使用多根编辑器的数据是根名 → HTML 字符串的映射对象。rootsAttributesObject创建编辑器时的初始根属性配合v-model:roots-attributes使用。configObject编辑器配置详见 配置指南。disabledBoolean置为true时整个编辑器切换为只读模式。disableWatchdogBoolean置为true时禁用 watchdog 崩溃恢复特性默认false。watchdogConfigWatchdogConfigwatchdog 特性 的配置对象例如允许的最大崩溃次数、崩溃最小间隔等。disableTwoWayDataBindingBoolean是否禁用编辑器与modelValue之间的双向数据绑定以提升性能默认false。组件事件Events组件对外发射以下事件ready— 编辑器就绪时触发回调参数为MultiRootEditor实例若初始化出错后发生重初始化也会再次触发。destroy— 编辑器实例被销毁时触发。change— 编辑器数据变化时触发对应editor.model.document#change:data事件。blur— 编辑器失焦时触发对应editor.editing.view.document#blur。focus— 编辑器聚焦时触发对应editor.editing.view.document#focus。error— 编辑器在初始化或运行期间崩溃时触发接收两个参数错误实例error与错误详情details。input— 编辑器数据变化时触发接收三个参数当前数据、一个EventInfo对象或null、以及MultiRootEditor实例。update:modelValue— 编辑器数据变化时触发用于更新v-model。update:rootsAttributes— 根属性变化时触发用于更新v-model:roots-attributes。error事件携带的details对象包含两个字段phase: initialization | runtime— 标明错误发生在编辑器/上下文初始化期间还是初始化完成后的运行期间。causesRestart: Boolean— 为true表示 watchdog 将尝试重启编辑器。change、blur、focus这三个编辑器事件回调均接收两个参数一个EventInfo对象以及一个MultiRootEditor实例。插槽值Slot ValuesCkeditorMultiRoot的默认插槽暴露以下值editor— 已创建的编辑器实例。roots— 编辑器根名称数组在移除或新增根后会自动更新模板中的v-for依赖它。data— 编辑器当前数据快照每次编辑器更新后刷新。注意如果通过disableTwoWayDataBinding禁用了双向绑定则不应使用该值。attributes— 编辑器根属性的当前快照每次根属性更新后刷新同样在禁用双向绑定时不应使用。rootsAttributes—attributes的别名。addRoot— 在运行时向编辑器新增根的函数。接收一个配置对象name根名、data初始数据、attributes初始根属性、modelElement例如$inlineRoot、editableOptions按根设置element、placeholder、label。返回一个 Promise在根添加完成后 resolve。removeRoot— 按根名从编辑器移除detach根的函数。返回一个 Promise在根移除完成后 resolve。另外两个配套组件的职责CkeditorElement在可编辑区域之外渲染编辑器 UI 元素接受editor属性与可选的element属性取值toolbar或menuBar。CkeditorMultiRootEditable渲染单个可编辑根接受editor、rootName、可选的id与editableOptions属性。双向数据绑定与大数据量优化默认情况下双向数据绑定是开启的用户在编辑器中的每一次改动都会自动同步到v-model绑定的对象根属性同理通过v-model:roots-attributes保持应用状态最新。但双向绑定在大文档场景下可能带来性能问题。官方建议将disableTwoWayDataBinding置为true关闭自动同步关闭后如需同步数据必须自行处理推荐的处理方式是接入 autosave 自动保存插件由插件按防抖策略定时读取数据另一种方式是监听change事件在每次编辑器更新时手动取数。这样既保留了编辑器状态与业务状态一致的最终目标又避免了每次按键都触发大对象深拷贝的性能开销。进阶动态增删根How to?动态添加与移除根默认插槽暴露的addRoot与removeRoot让你可以在事件处理器中随时管理编辑区域。addRoot接受新根的name、初始数据data、可选根属性attributes、用于 schema 的可选modelElement以及描述可编辑元素的editableOptions宿主标签、占位文本、无障碍标签template CkeditorMultiRoot v-modeleditorData :editorMultiRootEditor template #default{ editor, roots, addRoot, removeRoot } button clickaddSidebar( addRoot ) Add sidebar /button button clickremoveRoot( sidebar ) Remove sidebar /button CkeditorElement :editoreditor / CkeditorMultiRootEditable v-forrootName in roots :keyrootName :root-namerootName :editoreditor / /template /CkeditorMultiRoot /template script setup async function addSidebar( addRoot ) { await addRoot( { name: sidebar, data: pSidebar content/p, attributes: { order: 30 }, editableOptions: { element: section, placeholder: Type the sidebar content..., label: Sidebar } } ); } /script其中editableOptions.element字段接受标签名字符串如section、article或一个包含name、classes、styles、attributes的描述符对象用于定制可编辑宿主元素的样式与属性。混合标准根与内联根多根编辑器允许在同一文档中同时存在标准根与内联根。只要为某个根设置modelElement: $inlineRoot该根就只接受行内内容文本、加粗、斜体、链接等而不接受段落、列表这类块级内容。这对标题 正文型布局非常实用——标题根只允许输入纯文本行正文根保持完整的块级能力await addRoot( { name: title, data: Document title, modelElement: $inlineRoot, editableOptions: { element: h1, placeholder: Enter title... } } );注意如果不设置modelElement: $inlineRoot那么即使把宿主元素改成h1也只是换了标签外观schema 仍然允许该根容纳块级内容。底层原理MultiRootEditor 与 roots 配置Vue 组件本质上是对 CKEditor 5MultiRootEditor的封装。仓库中的核心实现位于 packages/ckeditor5-editor-multi-root/src/multirooteditor.ts其类注释明确了设计定位多根编辑器提供多个行内可编辑元素与一个共享工具栏所有可编辑区域都由同一个编辑器实例控制因此它们共享同一份配置、同一文档 ID 与同一撤销栈。该类型编辑器面向需要高度定制 UI 结构、精确控制每个可编辑区域位置的集成场景。几个值得注意的实现细节源码佐证每个根一个模型根元素构造函数中遍历config.roots为每个根调用this.model.document.createRoot( rootConfig.modelElement, rootName )创建模型根。config.roots.rootName的完整类型定义见 packages/ckeditor5-core/src/editor/editorconfig.ts 中的RootConfig接口支持element既有 DOM 元素 / 标签名 / 元素描述符、initialData、placeholder、label、modelElement等字段。addRoot()只注册模型根不创建 DOM源码明确提示addRoot()不会为新增根创建 DOM 可编辑元素需要监听addRoot事件并调用createEditable()来生成并挂载 DOM。Vue 组件正是借助roots插槽值的自动更新完成这一联动因此模板中的CkeditorMultiRootEditable会自动为新根渲染可编辑区域。按根只读MultiRootEditor#disableRoot( rootName, lockId )/enableRoot( rootName, lockId )支持对单个根加只读锁对应 Vue 组件层面整编辑器只读的disabled属性是另一粒度。根属性通过registerRootAttribute注册getRootsAttributes()只返回已注册的根属性未设置的属性返回null——这正是v-model:roots-attributes同步机制的底层数据来源。许可证校验构造函数中会解码licenseKey若许可证不允许多根编辑器MRE特性编辑器会被强制置为只读并提示featureNotAllowed。相关阅读与下一步编辑器的数据读写 API见 Getting and setting data 指南。进一步定制编辑器见 配置Configuration指南。单根场景下的 Vue 集成Classic 等编辑器类型见 Vue.js 3 默认集成指南。useCKEditorCloud/loadCKEditorCloud的完整选项说明见 加载 CDN 资源指南。按功能学习各插件用法见 功能Features目录。【免费下载链接】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），仅供参考
