@huanban/rulego-editor-ui

RuleGo 编辑器 UI Kit — 纯 DOM 组件集 (零框架依赖)

✨ 特性

• 零框架依赖 — 纯原生 DOM 操作，可用于任何前端框架
• 组件丰富 — 提供 Sidebar、Toolbar、PropertyPanel、ContextMenu 四大组件
• 自动绑定 — 组件自动连接 EditorCore 实例，响应状态变化
• 样式内聚 — 每个组件自带完整样式，即插即用

📦 安装

npm install @huanban/rulego-editor-ui @huanban/rulego-editor-core

🚀 快速开始

import { EditorCore } from '@huanban/rulego-editor-core'
import { Sidebar, Toolbar, PropertyPanel, ContextMenu } from '@huanban/rulego-editor-ui'

const core = new EditorCore({ container: document.getElementById('editor')! })

// 挂载侧边栏 (组件分类拖拽面板)
new Sidebar(document.getElementById('sidebar')!, { core })

// 挂载工具栏 (撤销/重做/保存/缩放)
new Toolbar(document.getElementById('toolbar')!, { core })

// 挂载属性面板 (节点配置编辑)
new PropertyPanel(document.getElementById('panel')!, { core })

📖 组件说明

| 组件 | 说明 | |------|------| | Sidebar | 左侧组件分类面板，支持拖拽添加节点 | | Toolbar | 顶部工具栏，内置撤销/重做/保存/缩放/删除 | | PropertyPanel | 右侧属性面板，动态渲染节点配置表单 | | ContextMenu | 右键上下文菜单 |

🔗 相关包

• @huanban/rulego-editor-core — 核心引擎 (必需)
• @huanban/rulego-editor-react — React 适配层
• @huanban/rulego-editor-vue — Vue 3 适配层

📄 协议

Apache-2.0