Gaea Editor 自定义组件配置指南

Gaea Editor 自定义组件配置指南

【免费下载链接】gaea-editor Design websites in your browser. A smart web editor! 项目地址: https://gitcode.com/gh_mirrors/ga/gaea-editor

前言

Gaea Editor 是一个功能强大的可视化编辑器，它允许开发者通过自定义组件来扩展编辑器的功能。本文将详细介绍如何在 Gaea Editor 中配置自定义组件，包括组件的基本注册方法和高级配置选项。

基础组件注册

要在 Gaea Editor 中添加自定义组件，首先需要创建一个 React 组件，然后将其注册到编辑器中。以下是基本步骤：

import BasicComponents from 'gaea-basic-components';

// 创建自定义组件
class MyInput extends React.Component {
  render() {
    return <input />;
  }
}

// 注册组件到编辑器
export function renderGaeaEditor() {
  return <Editor componentClasses={[...BasicComponents, MyInput]} />;
}

这种方式注册的组件会出现在编辑器的可拖拽组件列表中，但没有任何可配置的属性。

高级组件配置

为了让组件在编辑器中具有可配置性，我们需要为组件添加 gaeaSetting 配置对象。这个配置对象定义了组件在编辑器中的各种属性和行为。

配置对象结构

class Props {
  public gaeaSetting = {
    key: 'my-select-component',  // 组件唯一标识
    name: 'my-select-component', // 组件显示名称
    editors: [ /* 编辑器配置 */ ],
    events: [ /* 事件配置 */ ]
  };
}

class MyInput extends React.Component {
  static defaultProps = new Props();

  render() {
    return <input />;
  }
}

关键配置项详解

1. key 和 name

• key: 组件的唯一标识符，建议使用小写字母和连字符命名
• name: 在组件列表中显示的名称

2. editors 编辑器配置

editors 数组定义了组件在编辑器中可配置的属性。它支持两种格式：

简单分组标题：

editors: [
  'normal',  // 只是一个分组标题
  'basic'    // 另一个分组标题
]

属性编辑器配置：

editors: [
  {
    field: 'defaultValue',  // 影响的属性名
    text: 'defaultValue',   // 显示标签
    type: 'string'         // 编辑器类型
  }
]

3. 编辑器类型

Gaea Editor 支持多种编辑器类型：

类型	描述
string	文本输入框
number	数字输入框
boolean	开关/复选框
color	颜色选择器
array	数组编辑器
object	对象编辑器
box-editor	盒子模型编辑器

4. 复杂类型编辑器

对于数组和对象类型，需要提供额外的配置：

数组编辑器示例：

{
  field: "options",
  label: "选项",
  type: "array",
  editors: [
    {
      field: "value",
      type: "string",
      text: "值"
    },
    {
      field: "name",
      type: "string",
      text: "显示名称"
    }
  ]
}

这将生成一个数组编辑器，每个数组项包含 value 和 name 两个字段。

对象编辑器示例：

{
  field: "userInfo",
  label: "用户信息",
  type: "object",
  editors: [
    {
      field: "name",
      type: "string",
      text: "姓名"
    },
    {
      field: "age",
      type: "number",
      text: "年龄"
    }
  ]
}

5. events 事件配置

events 数组定义了组件可以触发的事件：

events: [
  {
    name: 'onChange',      // 事件显示名称
    field: 'onChange',     // 事件回调属性名
    data: [                // 事件传递的数据
      {
        name: 'newValue'   // 数据字段名
      }
    ]
  }
]

当组件触发 onChange 事件时，编辑器会调用配置的回调函数，并传递 newValue 参数。

最佳实践

1. 命名规范：保持 key 的唯一性和一致性，建议使用 your-prefix-component-name 格式
2. 合理分组：使用字符串类型的编辑器项对相关属性进行分组，提高用户体验
3. 类型安全：为每个属性选择最合适的编辑器类型
4. 嵌套结构：对于复杂数据结构，合理使用数组和对象编辑器

总结

通过本文的介绍，你应该已经掌握了在 Gaea Editor 中配置自定义组件的方法。从简单的组件注册到复杂的属性编辑器和事件配置，Gaea Editor 提供了丰富的选项来满足各种定制需求。合理利用这些配置选项，可以大大提升可视化编辑的灵活性和效率。

【免费下载链接】gaea-editor Design websites in your browser. A smart web editor! 项目地址: https://gitcode.com/gh_mirrors/ga/gaea-editor