@huanban/rulego-editor-vue

RuleGo 编辑器 Vue 3 适配层 — 提供 Vue 组件和 Composables

✨ 特性

• 开箱即用 — 提供 <RuleGoEditor /> 组件，一行代码嵌入编辑器
• Vue 3 Composables — useEditorCore、useEditorTheme、useEditorI18n
• 事件监听 — 支持 @save、@node-click、@ready 等 Vue 事件
• 插槽系统 — 通过 #sidebar、#toolbar、#panel 插槽自定义 UI
• 响应式状态 — 所有状态自动转为 Vue ref，模板中直接使用
• TypeScript — 完整类型定义
• 兼容 Vue 3.2+ — 支持 Composition API

📦 安装

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

# 可选：安装内置 UI 组件
npm install @huanban/rulego-editor-ui

🚀 快速开始

方式一：使用 <RuleGoEditor /> 组件

<template>
  <RuleGoEditor
    height="600px"
    :data="ruleChainData"
    @save="onSave"
    @node-click="onNodeClick"
  />
</template>

<script setup lang="ts">
import { RuleGoEditor } from '@huanban/rulego-editor-vue'

const ruleChainData = ref(null)

const onSave = (data) => console.log('保存:', data)
const onNodeClick = (node) => console.log('点击节点:', node)
</script>

方式二：使用 useEditorCore Composable

<template>
  <div ref="editorRef" style="height: 100%"></div>
</template>

<script setup lang="ts">
import { useEditorCore } from '@huanban/rulego-editor-vue'

const { core, isReady, loadData, save } = useEditorCore()

watch(isReady, (ready) => {
  if (ready) {
    loadData(myRuleChainData)
  }
})
</script>

📖 API

<RuleGoEditor /> Props

| 属性 | 类型 | 说明 | |------|------|------| | data | RuleChainData | 规则链数据 | | options | EditorOptions | 编辑器配置选项 | | height | string | 编辑器高度 (默认 100%) | | width | string | 编辑器宽度 (默认 100%) | | builtinUi | boolean | 是否使用内置 UI (默认 true) |

事件

| 事件 | 参数 | 说明 | |------|------|------| | @save | SaveEventData | 保存时触发 | | @node-click | NodeData | 节点点击时触发 | | @ready | — | 编辑器就绪时触发 |

插槽

| 插槽 | 参数 | 说明 | |------|------|------| | #sidebar | { groups, core } | 自定义侧边栏 | | #toolbar | { canUndo, canRedo, core } | 自定义工具栏 | | #panel | { nodeView, nodeModel, core } | 自定义属性面板 |

useEditorCore(options?) 返回值

| 属性 | 类型 | 说明 | |------|------|------| | core | EditorCore | 编辑器核心实例 | | isReady | Ref<boolean> | 编辑器是否就绪 | | isDirty | Ref<boolean> | 数据是否已修改 | | loadData | (data) => void | 加载规则链数据 | | save | () => void | 触发保存 | | on | (event, handler) => void | 监听事件 |

🔗 相关包

• @huanban/rulego-editor-core — 核心引擎 (必需)
• @huanban/rulego-editor-ui — UI 组件集 (可选)
• @huanban/rulego-editor-react — React 适配层

📄 协议

Apache-2.0