Gaea Editor ·

gaea-editor

Help develops build a scalable website visualization builder.

Quick start

npm i gaea-editor --save

And then, it's easy to use:

import Editor from 'gaea-editor';

ReactDOM.render(
  <div style={{ width: '100vw', height: '100vh' }}>
    <Editor />
  </div>,
  document.getElementById('react-root')
);

For vue - gaea-editor-vue, thanks CharlieLau.

Add custom component to the drag menu

You can add any react components to the drag menu, through the following line of code:

import BasicComponents from 'gaea-basic-components';
<Editor componentClasses={[...BasicComponents, CustomComponent1, CustomComponent2]} />;

BasicComponents support container, button, icon, select, switch. And there must be at least one component to set isContainer=true that can be used as outer container.

Generally speaking, with BasicComponents concat is ok, because the component container BasicComponents offered is a container.

Add editSetting to each component props, to let the editor know how to edit it visualizations:

defaultProps = {
  editSetting: {
    key: 'my-custom-key', // Unique key.
    name: 'Custom one', // The name shown in drag menu.
    isContainer: false, // Can be dragged in.
    editors: [
      {
        field: 'title',
        text: 'Text',
        type: 'string'
      }
    ] // Tell gaea-editor, which props can be edited and how to edit it.
  }
};

More about `editors`

gaea-editor provides several built-in type editing props. If you need to expand it, you can refer to custom plugin.

common field:

field: which props to edit. EX: value visible style.backgroundColor.
text: If exist, will appear in the form label to prompt the user.

The following are the built-in types:

string

Suitable for any string editing scene.

{
    type: 'string',
    text: 'Text',
    field: 'value'
}

number

Suitable for any number editing scene.

In many cases, it is suggested that inputRange and outputRange be set to the same value.

{
    type: 'number',
    text: 'Text',
    field: 'value',
    data: {
        useSlider: true,
        step: 1,
        inputRange: [0, 100],
        outputRange: [0, 1]
    }
}

boolean

Suitable for any boolean editing scene.

{
    type: 'boolean',
    text: 'Checked',
    field: 'value'
}

select

Suitable for enumable editing scene.

{
    type: 'select',
    text: 'Text',
    field: 'value',
    data: [{
        text: 'Default',
        value: 0
    }, {
        text: 'Small',
        value: 1
    }, {
        text: 'Large',
        value: 2
    }]
}

color

Suitable for color picker editing scene.

{
    type: 'color',
    text: 'Text',
    field: 'style.backgroundColor',
}

display

Suitable for layout editing scene.

Because this type will edit multiple props properties, such as style.display style.flexDirection, so don't need to specify the field field.

{
    type: 'display',
    text: 'Text'
}

box-editor

Suitable for margin-padding editing scene.

Because this type will edit multiple props properties, such as margin padding, so don't need to specify the field field.

{
    type: 'box-editor',
    text: 'Text'
}

array

Super type, allow visualizations to edit a array type props.

{
    type: 'array',
    text: 'values',
    data: 'string'
}

You can change string to boolean, than it can edit boolean array:

object array

Super type, allow visualizations to edit a array type props.

Each field in data describes how the key should be edited in the object in array.

Each field in data is a editor type. You can even nested array or object type inside.

{
    type: 'array',
    text: 'Options',
    data: [{
        field: "value",
        type: "string",
        text: "Value"
    }, {
        field: "text",
        type: "string",
        text: "Text"
    }, {
        field: "disabled",
        type: "boolean",
        text: "Disabled"
    }]
}

object

Super type, allow visualizations to edit a object type props.

Each field in data describes how the key should be edited in this object.

Each field in data is a editor type. You can even nested array or object type inside.

{
    type: 'object',
    text: 'Text',
    data: [{
        field: "name",
        type: "string",
        text: "Name"
    }, {
        field: "age",
        type: "number",
        text: "Age"
    }]
}

Options

You can add custom components, custom plugins, save callback, and read saved data.

Props	Type	Description
onSave	`(info?: string) => void`	When you click the Save button, feed back to you to save the information
defaultValue	`object`	Editor initial value, you can pass the value of the onSave callback and resume the draft
componentClasses	`Array<React.ComponentClass<IGaeaProps>>`	React classes. Any react component is supported, but you need some configuration information to tell the editor how to edit it. see custom-component-config
plugins	`IPlugin[]`	Advanced usage for custom editor functionality.
locale	string	`zh` or `cn`
ViewportRender	React.ReactElement<any>	You can rewrite viewport element.
disableBuiltInPlugin	string[]	Disable built in plugins.
preComponents	Array<{ gaeaKey: string; components: IPreComponent[]; }>	See docs/basic.tsx

Parameter: `onSave`

export function renderGaeaEditor() {
  return (
    <Editor
      onSave={value => {
        // send the value data to your server.
      }}
    />
  );
}

Parameter: `defaultValue`

The defaultValue came from onSave.

export function renderGaeaEditor() {
  return <Editor defaultValue={value} />;
}

Parameter: `componentClasses`

class MyInput extends React.Component {
  render() {
    return <input />;
  }
}

export function renderGaeaEditor() {
  return <Editor componentClasses={[MyInput]} />;
}

LiveDemo

Parameter: `plugins`

First you should install dob-react.

npm i dob-react

import { Connect } from 'dob-react'

@Connect
class Plugin extends React.Component {
  render() {
  	return 'plugin'
  }
}

const plugin {
  position: "mainToolEditorTypeShow",
  class: ShowEditor
}

export function renderGaeaEditor() {
    return (
        <Editor plugins={[ Plugin ]}/>
    )
}

CustomEditTypeLiveDemo

What is position? What can i do with plugin? See more in custom-plugin

Communication

Talk to us about gaea-editor using DingDing.

Local development run

git clone https://github.com/ascoders/gaea-editor.git
cd gaea-editor
npm i
npm run docs

Will automatically open the default browser.

Deploy

Step 1, get value by onSave method in gaea-editor:

import Editor from 'gaea-editor';

ReactDOM.render(<Editor onSave={value => saveToServer(value)} />, document.getElementById('react-root'));

step 2, install gaea-render, and pass value to it:

npm i gaea-render

import Render from 'gaea-render';

const value = getValueFromServer(); // <Editor onSave={value => // From here. } />

ReactDOM.render(<Render value={value} />, document.getElementById('react-root'));

Custom component

By default, both gaea-editor and gaea-render using gaea-basic-components. You can overwrite it by these code:

import Editor from 'gaea-editor';
import Render from 'gaea-render';

ReactDOM.render(<Editor componentClasses={myCustomComponents} />, document.getElementById('react-editor'));
ReactDOM.render(<Render componentClasses={myCustomComponents} />, document.getElementById('react-render'));

Or concat gaea-basic-components:

import Editor from 'gaea-editor';
import Render from 'gaea-render';
import BasicComponents from 'gaea-basic-components';

ReactDOM.render(
  <Editor componentClasses={[...BasicComponents, myCustomComponents]} />,
  document.getElementById('react-editor')
);
ReactDOM.render(
  <Render componentClasses={[...BasicComponents, myCustomComponents]} />,
  document.getElementById('react-render')
);

ruixj/gaea-editor