Elementor Editor V2 包架构解析从 PHP 过滤器到 React 微前端的模块化编辑器【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementor导读Editor V2 是 Elementor 新一代模块化编辑器前端它以 React TypeScript 构建的**独立包Package**为单位组织功能通过 WordPress 脚本句柄按需入队enqueue并统一暴露在window.elementorV2全局命名空间上。本文以仓库文档 docs/atomic-builder/editor-packages/overview.md 为主体结合 Editor_Loader 源码 与elementor/editor包的实现系统讲解 V2 编辑器的包分类、PHP 注册机制、加载生命周期与扩展方式。读完本文你将掌握如何通过 WordPress 过滤器注册一个扩展包、理解init()与start()的执行时序并能借助源码定位任意编辑器功能的归属模块。Editor V2 是什么Editor V2 是 Elementor 编辑器的模块化前端架构对应文档标题 Editor Packages Overview。与传统的单体editor.js不同V2 将编辑器功能拆分为独立构建、动态加载的多个包每个功能包独立开发、独立打包产物为独立的 WordPress 脚本句柄包通过window.elementorV2暴露支持按需加载PHP 侧通过 WordPress 过滤器注册包名每个被加载的包在elementor/editor渲染之前执行自己的init()。这一设计本质上是一种**微前端Micro-frontend**方案功能包之间通过依赖图而非单一入口耦合构建与发布粒度更细也为第三方扩展提供了稳固的扩展面。仓库中该架构的 monorepo 参考说明见 packages/docs/architecture.md模块与文档的对应关系如下模块说明core/editor/loader/PHP 侧加载器Editor_Loader与 JS 入口packages/packages/core/核心编辑器包React TypeScript 源码packages/packages/libs/共享基础库NPM 包Public API 一览Editor V2 对外暴露的核心 API 可归纳为下表验证于 editor-loader.php、editor/src/index.ts 与 locations.tsSymbolSignature用途Editor_Loader过滤器elementor/editor/v2/packages注册扩展包Editor_Loader过滤器elementor/editor/v2/scripts/env按包提供运行时配置elementor/editorstart( domElement )启动 React 外壳Shellelementor/editorinjectIntoTop、injectIntoLogic外壳注入点Location Slots包入口init(): void同步注册逻辑加载时自动调用其中elementor/editor包的导出实现在 index.ts 中仅有两行export { injectIntoTop, injectIntoLogic } from ./locations; export { start } from ./start;而injectIntoTop与injectIntoLogic在 locations.ts 中由elementor/locations的createLocation()创建import { createLocation } from elementor/locations; export const { Slot: TopSlot, inject: injectIntoTop } createLocation(); export const { Slot: LogicSlot, inject: injectIntoLogic } createLocation();这就是“可插拔 UIPluggable UI”的基础每个 Location 是一个可挂载 React 组件的插槽扩展包通过inject注入组件外壳通过Slot渲染。何时使用 Editor V2官方文档用一个问答表给出了选型判断依据问题答案为什么用 Packages 而非旧版editor.js微前端独立构建、动态加载哪些包会被加载PHP 过滤器 各模块内的实验门控experiment gates共同决定init()何时运行脚本依赖加载完成之后、editor.start()之前如何新增一个包参见 extending-editor.md判断要点如果你要新增一个编辑器功能区域、注入 UI 到顶栏/编辑面板/元素面板、桥接旧版编辑器事件或者注册编辑器内 MCP 工具就应走 Editor V2 的包扩展路线而纯后端能力或与编辑器 UI 无关的逻辑则不属于本架构范畴。核心概念包分类Package CategoriesEditor V2 的包分为四类角色与示例见下表类别角色示例App根外壳elementor/editorExtension功能区域elementor/editor-canvasLibrary共享 APIelementor/editor-propsTool构建支持webpack 插件从源码看Editor_Loader也以三个常量划分包集合见 editor-loader.phpLIBS基础库集合包括locations、store、schema、editor-v1-adapters、ui、query、http-client等 21 个共享库EXTENSIONS内置扩展集合包括editor-documents、editor-panels、editor-elements-panel、editor-mcp、editor-notifications、unlock-v4-promo、elementor-v3-mcp、elementor-kit-mcp等APP_PACKAGE editor根应用包。PHP 注册机制注册一个扩展包只需要在 WordPress 过滤器中追加包名add_filter( elementor/editor/v2/packages, fn ( $packages ) array_merge( $packages, [ my-package ] ) );值得注意的是过滤器链的传递顺序见 apply_editor_filter 实现elementor/editor/packages → elementor/editor/v1/packages → elementor/editor/v2/packages即先执行基础过滤器再依次执行 v1、v2 版本化过滤器最终结果作为待加载包列表。基础库locations、store、schema、editor-v1-adapters等在Editor_Loader::LIBS中预注册无需各模块重复声明。生命周期LifecycleEditor V2 的启动分为四个阶段Load加载—— 按包调用wp_enqueue_script包间依赖取自各包的.asset.phpEnv环境——elementor/editor/v2/scripts/env过滤器生成配置通过Utils::print_js_config输出为全局变量elementorEditorEnvInit extensions初始化扩展—— 遍历window.elementorV2.{name}?.init?.()执行各包的同步注册Start app启动应用—— 调用window.elementorV2.editor.start( domElement )启动 React 外壳。关键事实init()的执行顺序遵循脚本依赖图dependency graph而非 PHP 过滤器数组的顺序实验门控experiment gates在 PHP 侧、将包名加入列表之前就已经完成判断。源码级深入加载器与启动时序Editor_Loader的三阶段管线editor-loader.php 中Editor_Loader的方法名即对应生命周期init()合并get_packages_to_enqueue()即EXTENSIONS过过滤器后的结果与LIBS再追加APP_PACKAGE为每个包调用assets_config_provider-load()读取构建清单register_scripts()为每个包wp_register_script脚本地址形如{assets_url}js/packages/{package}/{package}{min_suffix}.js依赖由构建清单deps与ADDITIONAL_DEPS合并而来elementor-editor-environmentenv 包与elementor-editor-loaderApp 包的加载器在此注册enqueue_scripts()先入队elementor-editor-environment通过apply_editor_filter(scripts/env, ...)生成elementorEditorEnv配置内置了elementor/http-client的 REST 基址与X-WP-Nonce、elementor/editor-controls的占位图等再按过滤后的包列表入队各包脚本最后入队elementor-editor-loader并输出ElementorConfig。其中环境过滤器链与包过滤器链一致elementor/editor/scripts/env→elementor/editor/v1/scripts/env→elementor/editor/v2/scripts/env见 enqueue_scripts。JS 入口editor-loader.jscore/editor/loader/js/editor-loader.js 是前端启动的收尾环节window.__elementorEditorV1LoadingPromise new Promise( ( resolve ) { window.addEventListener( elementor/init, () { resolve(); }, { once: true } ); } ); window.elementor.start(); if ( ! window.elementorV2?.editor ) { throw new Error( The elementor/editor package was not loaded. ); } window.elementorV2 .editor .start( document.getElementById( elementor-editor-wrapper-v2 ), );这段代码清晰呈现了 V1 与 V2 的共存方式先等待 V1 编辑器初始化事件再启动 V2 React 外壳并将其挂载到#elementor-editor-wrapper-v2容器上若elementor/editor包未加载则直接抛出显式错误便于排查。start()内部React 外壳的组装elementor/editor的start( domElement )实现在 start.tsx其组装了完整的 React 上下文栈export function start( domElement: Element ): void { const store __createStore(); const queryClient createQueryClient(); ensureCurrentUser(); dispatchReadyEvent(); render( StoreProvider store{ store } QueryClientProvider client{ queryClient } DirectionProvider rtl{ window.document.dir rtl } ThemeProvider GlobalDialog / Shell / /ThemeProvider /DirectionProvider /QueryClientProvider /StoreProvider, domElement ); }从源码可以推断状态管理使用elementor/storeRedux 动态 store与elementor/queryReact Query通过elementor/editor-v1-adapters的__privateDispatchReadyEvent向 V1 适配层派发就绪事件实现新旧编辑器的桥接RTL 支持由DirectionProvider依据document.dir自动切换渲染层兼容 React 18 的createRoot并回退到旧版ReactDOM.render兼顾不同 React 版本见 start.tsx。扩展 Editor V2两步走第一步PHP 注册包与可选环境配置add_filter( elementor/editor/v2/packages, function ( array $packages ) { if ( ! my_feature_is_active() ) { return $packages; } return array_merge( $packages, [ my-editor-feature ] ); } );按包提供运行时配置会被合并进elementorEditorEnvadd_filter( elementor/editor/v2/scripts/env, function ( array $env ) { $env[elementor/my-editor-feature] [ enabled true ]; return $env; } );第二步创建带init()的 JS 包从src/index.ts导出init即可新包创建指引见 packages/docs/creating-a-new-package.md。init()的调用契约是window.elementorV2.{packageName}?.init?.();约束init()只做同步注册注册 Location、面板、菜单、registry 等实际的渲染工作应延迟到注入插槽内的 React 组件中执行。常用注入点示例App Bar参考 editor-site-navigation/src/init.tsimport { injectIntoPageIndication, toolsMenu } from elementor/editor-app-bar; export function init() { injectIntoPageIndication( { id: my-indicator, component: MyIndicator } ); toolsMenu.registerToggleAction( { id: toggle-my-panel, priority: 20, useProps: useMyToggleProps } ); }编辑面板与侧滑面板import { injectIntoStyleTab, registerEditingPanelReplacement } from elementor/editor-editing-panel; import { registerPanel } from elementor/editor-panels; injectIntoStyleTab( { id: my-style-section, component: MyStyleSection } ); registerPanel( { id: my-panel, component: MyPanel } ); registerEditingPanelReplacement( { id: my-element-panel, condition: ( _el, type ) type.key my-element, component: MyElementPanel, } );此外还有旧版桥接registerDataHook、blockCommand、listenTo( v1ReadyEvent(), fn )与编辑器内 MCP 工具getMCPByDomain()等扩展面详见 extending-editor.md 与 registering-editor-tools.md。核心包与基础库速览实验门控与包归属从 modules/atomic-widgets/module.php 可以看到实验门控的完整范式atomic-widgets模块定义PACKAGES常量editor-canvas、editor-controls、editor-editing-panel、editor-elements、editor-props、editor-styles、editor-styles-repository、editor-interactions、editor-templates、editor-design-system、editor-site-settings并在构造函数中通过add_filter( elementor/editor/v2/packages, fn ( $packages ) $this-add_packages( $packages ) )注册。其中editor-controls、editor-elements、editor-props、editor-styles是纯依赖包dep only——只作为其他包的前置依赖被加载不会单独入队。完整的包→模块→实验门控对照表见 core-packages.md注意该文档明确标注为SNAPSHOT 快照会随时间过期新增包请以 extending-editor.md 为准。典型门控规则如editor-global-classes需要e_classese_atomic_elements两个实验同时开启editor-variables需要e_variablese_atomic_elements而editor-app-bar则无门控。基础库Libraries共享库位于 packages/packages/libs/是功能包的传递性 webpack 依赖其中一部分在Editor_Loader::LIBS预注册。核心库速览目录NPM 名称是否在LIBS中editor-propselementor/editor-props否经atomic-widgetsPACKAGES 间接加载editor-styleselementor/editor-styles否editor-controlselementor/editor-controls否editor-elementselementor/editor-elements否editor-responsiveelementor/editor-responsive是editor-mcpelementor/editor-mcp否在EXTENSIONS中editor-v1-adapterselementor/editor-v1-adapters是schemaelementor/schema是几个值得注意的设计elementor/editor-props是 PHP 侧 prop 类型体系的 JS 对应物PHP 侧通过elementor/atomic-widgets/props-schema过滤器镜像注册两侧的$$type键必须保持对齐elementor/editor-mcp是 JS 侧的 MCP registry区别于 PHP 的modules/mcp/被editor-canvas、editor-global-classes、editor-variables、editor-interactions等包引用使用方式为getMCPByDomain( my-namespace, { instructions: ... } )elementor/editor-v1-adapters是连接旧版editor.js事件的桥接层导出registerDataHook、blockCommand、listenTo等 API带__private前缀的导出为内部实现不建议外部使用。更多细节参见 libs.md。实现细节Internals组件路径加载器Loadercore/editor/loader/editor-loader.php打包器Bundler.grunt-config/webpack.packages.js入口Entrycore/editor/loader/js/editor-loader.js可插拔 UIelementor/locations→createLocation()两个补充提示见 extending-editor.md 的 Internals 小节菜单elementor/menus提供createMenu()按菜单组创建菜单全局对象window.elementorV2.{camelCasePackage}供延迟加载的脚本使用常规场景应优先使用 NPM 导入import { ... } from elementor/...以获得类型提示与 tree-shaking 收益。排查指南当某个 V2 编辑器功能缺失时可按以下顺序定位确认实验门控到对应 PHP 模块如 modules/atomic-widgets/module.php检查is_active()与 PACKAGES 注册确认实验是否开启确认包被过滤器接受断点或临时输出apply_filters(elementor/editor/v2/packages, ...)的结果确认包名在最终列表中确认脚本被入队在浏览器 Network 面板查看js/packages/{package}/{package}.js是否请求成功依赖缺失会在此暴露依赖来自.asset.php确认init()执行在包入口打断点检查window.elementorV2.{name}?.init?.()是否被调用以及是否因依赖图顺序导致先决包未就绪确认环境配置检查elementorEditorEnv中对应包的配置段是否符合预期。总结Editor V2 是 Elementor 编辑器向模块化、可扩展架构演进的核心成果。它的设计可以概括为三个要点PHP 侧用过滤器声明包清单elementor/editor/v2/packages、JS 侧用init()做同步注册window.elementorV2.{name}.init?.()、运行时由依赖图决定加载顺序最终由editor.start( domElement )组装 React 外壳。结合 Editor_Loader 源码、elementor/editor 包实现 与 atomic-widgets 模块的注册范式开发者既能快速定位任意功能的包归属也能按两步流程接入自己的扩展包。延伸阅读Extending the Editor扩展编辑器完整指南Core Editor Packages核心包快照Editor Foundation Libraries基础库架构总览Monorepo 架构说明创建新包指南注册编辑器内 MCP 工具【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考