mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-12 11:20:11 +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`。您可以直接通过此方式初始化低代码引擎:
|
正确引入后,我们可以直接通过 window 上的变量进行引用,如 `window.AliLowCodeEngine.init`。您可以直接通过此方式初始化低代码引擎:
|
||||||
|
|
||||||
```javascript
|
```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)
|
> 本节中的低代码编辑器例子可以在 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)章节。
|
详见[低代码扩展简述](/site/docs/guide/expand/editor/summary)章节。
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user