接入编辑器

您有两种方式初始化低代码编辑器：

  1. clone 低代码项目的官方 demo，直接启动项目。适合普通人。
  2. 手工引入低代码 UMD 包，手工配置、打包和启动。适合 Webpack 配置工程师。

方法 1: Clone 并启动

可以通过两种方式之一获取低代码编辑器的示例代码：

  1. 直接在 github 仓库下进行下载

接入编辑器 - 图1

  1. 如果本地安装了 git，可以通过 git clone 方式进行下载

（这个方法的好处是 demo 有了更新，可以通过 merge 方式跟上）

  1. git clone https://github.com/alibaba/lowcode-demo.git

拉取仓库代码后，需要进行如下配置或安装过程：

  1. 确保本地安装了 Node.js 和 npm，如果没有，您可以通过 nvm 进行快捷的安装
  2. 确保为 npm 设置了可以访问的 npm 源，保证安装过程无网络问题
  3. 执行 npm install

依赖完全安装完成后，执行 npm start，如果看到这个界面，说明项目启动成功。您可以继续看后续章节了。本章节后续内容均为高级配置方式。

接入编辑器 - 图2

方法 2: 手工引入低代码 UMD 包，手工配置打包和启动

如果您不是从零开始的项目，您可能需要手工引入低代码引擎。

引入 UMD 包资源

我们需要在启动前，正确在项目中通过 UMD 包方式直接依赖如下内容：

（亦可使用异步加载工具，如果您按照正确的顺序进行加载）

  1. <!-- 低代码引擎的页面框架样式 -->
  2. <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/css/engine-core.css" />
  3. <!-- Fusion Next 控件样式 -->
  4. <link rel="stylesheet" href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css">
  5. <!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
  6. <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css">
  7. <!-- 低代码引擎官方扩展的样式 -->
  8. <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/css/engine-ext.css" />
  10. <!-- React，可替换为 production 包 -->
  11. <script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js"></script>
  12. <!-- React DOM，可替换为 production 包 -->
  13. <script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js"></script>
  14. <!-- React 向下兼容，预防物料层的依赖 -->
  15. <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
  16. <script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
  17. <!-- lodash，低代码编辑器的依赖 -->
  18. <script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
  19. <!-- 日期处理包，Fusion Next 的依赖 -->
  20. <script src="https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js"></script>
  21. <!-- Fusion Next 的主包，低代码编辑器的依赖 -->
  22. <script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
  23. <!-- 低代码引擎的主包 -->
  24. <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/js/engine-core.js"></script>
  25. <!-- 低代码引擎官方扩展的主包 -->
  26. <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/js/engine-ext.js"></script>

注：如果 unpkg 的服务比较缓慢，您可以使用 alicdn 来获得确定版本的低代码引擎，如对于引擎的 1.0.1 版本，可用 https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.1/dist/js/engine-core.js

配置打包

因为这些资源已经通过 UMD 方式引入，所以在 Webpack 等构建工具中需要配置它们为 external，不再重复打包：

  1. {
  2.   "externals": {
  3.     "react": "var window.React",
  4.     "react-dom": "var window.ReactDOM",
  5.     "prop-types": "var window.PropTypes",
  6.     "@alifd/next": "var window.Next",
  7.     "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
  8.     "@alilc/lowcode-editor-core": "var window.AliLowCodeEngine.common.editorCabin",
  9.     "@alilc/lowcode-editor-skeleton": "var window.AliLowCodeEngine.common.skeletonCabin",
  10.     "@alilc/lowcode-designer": "var window.AliLowCodeEngine.common.designerCabin",
  11.     "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
  12.     "@ali/lowcode-engine": "var window.AliLowCodeEngine",
  13.     "moment": "var window.moment",
  14.     "lodash": "var window._"
  15.   }
  16. }

初始化低代码编辑器

方法 2.1 使用 init 进行初始化

正确引入后，我们可以直接通过 window 上的变量进行引用，如 window.AliLowCodeEngine.init。您可以直接通过此方式初始化低代码引擎：

  1. // 确保在执行此命令前，在 <body> 中已有一个 id 为 lce-container 的 <div />
  2. window.AliLowCodeEngine.init(document.getElementById('lce-container'), {
  3.   enableCondition: true,
  4.   enableCanvasLock: true,
  5. });

如果您的项目中使用了 TypeScript，您可以通过如下 devDependencies 引入相关包，并获得对应的类型推断。

  1. // package.json
  2. {
  3.   "devDependencies": {
  4.     "@alilc/lowcode-engine": "beta"
  5.   }
  6. }
  1. import { init } from '@alilc/lowcode-engine';
  3. init(document.getElementById('lce-container'), {
  4.   enableCondition: true,
  5.   enableCanvasLock: true,
  6. });

init 的功能包括但不限于：

  1. 传递 options 并设置 config 对象；
  2. 传递 preference 并设置 plugins 入参；
  3. 初始化 Workbench；

本节中的低代码编辑器例子可以在 demo 中找到：https://github.com/alibaba/lowcode-demo/blob/main/src/index.ts#L21-L34

方法 2.2 使用 skeletonCabin.Workbench 方式初始化

init() 内部会调用 ReactDOM.render() 函数，因此这样初始化的内容没有办法与外部的 React 组件进行通信，也就没有办法在一些自定义的 plugin 中获取 redux 上的全局数据等内容。

因此，这种场景下您可以通过 skeletonCabin.Workbench 进行初始化。

注：您不需要同时使用 2.1 和 2.2 的方法。根据使用场景，只有需要低代码引擎插件和外界进行一定通信时，2.2 提供的方法才是必要的。

  1. import React, { useState, useEffect } from 'react'
  2. import { project, plugins, common, skeleton } from '@alilc/lowcode-engine'
  4. // 此 schema 参考 demo 中的默认 schema 书写
  5. import userSchema from './schema.json'
  7. export default function EditorView() {
  8.   /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */
  9.   const [hasPluginInited, setHasPluginInited] = useState(false)
  11.   useEffect(() => {
  12.     plugins.init().then(() => {
  13.       setHasPluginInited(true)
  14.     }).catch(err => console.error(err))
  15.   }, [])
  17.   useEffect(() => {
  18.     project.importSchema(userSchema)
  19.   }, [userSchema])
  21.   return hasPluginInited && (
  22.       <common.skeletonCabin.Workbench
  23.         skeleton={skeleton}
  24.       />
  25.     )}
  26.   )
  27. }

本节中的低代码编辑器例子可以在 demo 中找到：https://github.com/alibaba/lowcode-demo/blob/main/src/index-custom.tsx

配置低代码编辑器

详见“低代码扩展简述“章节。