您现在的位置是：首页 >学无止境 >EasyEditor: 一个面向扩展的跨框架低代码引擎网站首页学无止境

项目地址：Easy-Editor/EasyEditor: A cross-framework low-code engine with scale-out design

该项目的灵感来自于 lowcode-engine 以及公司项目。

项目简介

EasyEditor 是一个面向扩展的跨框架低代码引擎，提供了一套完整的可视化设计系统和灵活的插件架构。通过简单的拖拽操作即可快速搭建应用，同时支持 React、Vue 等多种框架的渲染扩展。它不仅拥有企业级的功能特性，还具备高度的可定制性，让开发者能够根据实际需求打造专属的低代码平台。

核心特性

• 解耦设计：引擎核心与框架无关，支持多种框架渲染扩展
• 可视化设计：完整的设计器实现，拖拽布局、吸附对齐、多设备预览、撤销/重做栈…
• 插件化架构：灵活的插件系统设计，生命周期管理、热键绑定、类扩展机制、依赖注入…
• 渲染引擎：多框架支持、实时预览、Schema 驱动、组件隔离沙箱
• 企业级能力：数据源管理、多语言支持、版本控制、在线协作

快速开始

Dashboard + React 示例

1. 安装

# 用于 core 和 renderer 进行数据驱动和响应式处理
pnpm add mobx mobx-react

# 安装引擎核心和插件
pnpm install @easyeditor/core @easyeditor/plugin-dashboard @easyeditor/react-renderer-dashboard

2. 初始化

import { createEditor } from '@easyeditor/core'
import DashboardPlugin from '@easyeditor/plugin-dashboard'

export const editor = createEasyEditor({
  plugins: [DashboardPlugin()],
  setters,
  components,
  componentMetas,
})

// 获取核心模块export const designer = await editor.onceGot<Designer>('designer')
export const project = await editor.onceGot<Project>('project')
export const simulator = await editor.onceGot<Simulator>('simulator')

3. 使用

// 设计态import { SimulatorRenderer } from '@easyeditor/react-renderer-dashboard'
<SimulatorRenderer host={simulator} />

// 预览态import { ReactRenderer } from '@easyeditor/react-renderer-dashboard'
<ReactRenderer components={components} schema={docSchema} />

插件开发

import type { Plugin } from '@easy-editor/core'

const ExamplePlugin: Plugin = ctx => {
  return {
    name: 'ExamplePlugin',
    deps: [],
    init(ctx) {
      const { hotkey } = ctx

      ctx.logger.log('打个日志', ctx)

      // 添加快捷键
      hotkey.bind('ctrl+d', e => {
        e.preventDefault()
        logger.log('ctrl+d')
      })
    },
    // 扩展类
    extend({ extend }) {
      extend('Designer', {
        test: {
          value(this: Designer) {
            console.log('test', this)
          },
        },
      })
    }
  }
}

// 使用
createEasyEditor({
  plugins: [ExamplePlugin()],
  // ...
})

规划

目前，EasyEditor 的核心设计已经完成，并以 Dashboard 作为首个案例，迈出了第一步。

也欢迎大家通过在 GitHub 上提交 Issue 来反馈您在使用过程中遇到的问题和宝贵建议，帮助我们不断完善 EasyEditor。同时，我们也热切期待您的 Contribute。