Gaea Editor ·

gaea-editor

Help develops build a scalable website visualization builder.

Try it online.

Quick start

1npm i gaea-editor --save

And then, it's easy to use:

1import Editor from 'gaea-editor';
2
3ReactDOM.render(
4  <div style={{ width: '100vw', height: '100vh' }}>
5    <Editor />
6  </div>,
7  document.getElementById('react-root')
8);

• 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:

1import BasicComponents from 'gaea-basic-components';
2<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:

1defaultProps = {
2  editSetting: {
3    key: 'my-custom-key', // Unique key.
4    name: 'Custom one', // The name shown in drag menu.
5    isContainer: false, // Can be dragged in.
6    editors: [
7      {
8        field: 'title',
9        text: 'Text',
10        type: 'string'
11      }
12    ] // Tell gaea-editor, which props can be edited and how to edit it.
13  }
14};

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.

1{
2    type: 'string',
3    text: 'Text',
4    field: 'value'
5}

number

Suitable for any number editing scene.

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

1{
2    type: 'number',
3    text: 'Text',
4    field: 'value',
5    data: {
6        useSlider: true,
7        step: 1,
8        inputRange: [0, 100],
9        outputRange: [0, 1]
10    }
11}

boolean

Suitable for any boolean editing scene.

1{
2    type: 'boolean',
3    text: 'Checked',
4    field: 'value'
5}

select

Suitable for enumable editing scene.

1{
2    type: 'select',
3    text: 'Text',
4    field: 'value',
5    data: [{
6        text: 'Default',
7        value: 0
8    }, {
9        text: 'Small',
10        value: 1
11    }, {
12        text: 'Large',
13        value: 2
14    }]
15}

color

Suitable for color picker editing scene.

1{
2    type: 'color',
3    text: 'Text',
4    field: 'style.backgroundColor',
5}

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.

1{
2    type: 'display',
3    text: 'Text'
4}

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.

1{
2    type: 'box-editor',
3    text: 'Text'
4}

array

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

1{
2    type: 'array',
3    text: 'values',
4    data: 'string'
5}

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.

1{
2    type: 'array',
3    text: 'Options',
4    data: [{
5        field: "value",
6        type: "string",
7        text: "Value"
8    }, {
9        field: "text",
10        type: "string",
11        text: "Text"
12    }, {
13        field: "disabled",
14        type: "boolean",
15        text: "Disabled"
16    }]
17}

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.

1{
2    type: 'object',
3    text: 'Text',
4    data: [{
5        field: "name",
6        type: "string",
7        text: "Name"
8    }, {
9        field: "age",
10        type: "number",
11        text: "Age"
12    }]
13}

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.

Parameter: onSave

1export function renderGaeaEditor() {
2  return (
3    <Editor
4      onSave={value => {
5        // send the value data to your server.
6      }}
7    />
8  );
9}

Parameter: value

The value came from onSave.

1export function renderGaeaEditor() {
2  return <Editor value={value} />;
3}

Parameter: componentClasses

1class MyInput extends React.Component {
2  render() {
3    return <input />;
4  }
5}
6
7export function renderGaeaEditor() {
8  return <Editor componentClasses={[MyInput]} />;
9}

LiveDemo

Read more in custom-component-config.

Parameter: plugins

First you should install dob-react.

1npm i dob-react

1import { Connect } from 'dob-react'
2
3@Connect
4class Plugin extends React.Component {
5  render() {
6  	return 'plugin'
7  }
8}
9
10const plugin {
11  position: "mainToolEditorTypeShow",
12  class: ShowEditor
13}
14
15export function renderGaeaEditor() {
16    return (
17        <Editor plugins={[ Plugin ]}/>
18    )
19}

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

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

Will automatically open the default browser.

Deploy

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

1import Editor from 'gaea-editor';
2
3ReactDOM.render(<Editor onSave={value => saveToServer(value)} />, document.getElementById('react-root'));

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

1npm i gaea-render

1import Render from 'gaea-render';
2
3const value = getValueFromServer(); // <Editor onSave={value => // From here. } />
4
5ReactDOM.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:

1import Editor from 'gaea-editor';
2import Render from 'gaea-render';
3
4ReactDOM.render(<Editor componentClasses={myCustomComponents} />, document.getElementById('react-editor'));
5ReactDOM.render(<Render componentClasses={myCustomComponents} />, document.getElementById('react-render'));

Or concat gaea-basic-components:

1import Editor from 'gaea-editor';
2import Render from 'gaea-render';
3import BasicComponents from 'gaea-basic-components';
4
5ReactDOM.render(
6  <Editor componentClasses={[...BasicComponents, myCustomComponents]} />,
7  document.getElementById('react-editor')
8);
9ReactDOM.render(
10  <Render componentClasses={[...BasicComponents, myCustomComponents]} />,
11  document.getElementById('react-render')
12);