diff --git a/docs/docs/guide/create/useEditor.md b/docs/docs/guide/create/useEditor.md index cbb38f77d..8df4158a6 100644 --- a/docs/docs/guide/create/useEditor.md +++ b/docs/docs/guide/create/useEditor.md @@ -105,8 +105,6 @@ sidebar_position: 0 ### 初始化低代码编辑器 -#### 方法 2.1 使用 init 进行初始化 - 正确引入后,我们可以直接通过 window 上的变量进行引用,如 `window.AliLowCodeEngine.init`。您可以直接通过此方式初始化低代码引擎: ```javascript @@ -144,59 +142,5 @@ init 的功能包括但不限于: > 本节中的低代码编辑器例子可以在 demo 中找到:[https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts](https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts) - -#### 方法 2.2 使用 skeletonCabin.Workbench 方式初始化 - -`init()` 内部会调用 `ReactDOM.render()` 函数,因此这样初始化的内容没有办法与外部的 React 组件进行通信,也就没有办法在一些自定义的 plugin 中获取 redux 上的全局数据等内容。 - -因此,这种场景下您可以通过 `skeletonCabin.Workbench` 进行初始化。 - -> 注:**不需要**同时使用 2.1 和 2.2 的方法。根据使用场景,当且只当有需要插件和外界进行一定通信时,才需要使用 2.2 提供的方法。 - - -```javascript -import React, { useState, useEffect } from 'react'; -import { project, plugins, common, skeleton } from '@alilc/lowcode-engine'; - -// 此处略去若干依赖引用 - -async function registerPlugins() { - // 此处略去若干插件注册 -} -function EditorView() { - /** 插件是否已初始化成功,因为必须要等插件初始化后才能渲染 Workbench */ - const [hasPluginInited, setHasPluginInited] = useState(false); - - useEffect(() => { - plugins.init().then(() => { - setHasPluginInited(true); - }).catch(err => console.error(err)); - }, []); - - if (!hasPluginInited) { - return null; - } - const Workbench = common.skeletonCabin.Workbench; - return ; -} - -(async function main() { - await registerPlugins(); - config.setConfig({ - enableCondition: true, - enableCanvasLock: true, - supportVariableGlobally: true, - requestHandlersMap: { - fetch: createFetchHandler() - } - }); - - ReactDOM.render(, document.getElementById('lce-container')!); -})(); -``` - -> 本节中的低代码编辑器类似的例子可以在 demo 中找到:[https://github.com/alibaba/lowcode-demo/blob/main/demo-custom-initialization/src/index.tsx](https://github.com/alibaba/lowcode-demo/blob/main/demo-custom-initialization/src/index.tsx) - - ## 配置低代码编辑器 详见[低代码扩展简述](/site/docs/guide/expand/editor/summary)章节。