mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-11 18:42:56 +00:00
docs: update useEditor.md
This commit is contained in:
parent
95a48e057f
commit
c5ba2f3ef1
@ -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 <Workbench />;
|
||||
}
|
||||
|
||||
(async function main() {
|
||||
await registerPlugins();
|
||||
config.setConfig({
|
||||
enableCondition: true,
|
||||
enableCanvasLock: true,
|
||||
supportVariableGlobally: true,
|
||||
requestHandlersMap: {
|
||||
fetch: createFetchHandler()
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<EditorView />, 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)章节。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user