• Stars
    star
    2,274
  • Rank 20,260 (Top 0.4 %)
  • Language
    TypeScript
  • Created about 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

amis 可视化编辑器示例 https://aisuda.github.io/amis-editor-demo

amis-editor-demo

amis 可视化编辑器, 在线体验:https://aisuda.github.io/amis-editor-demo

要使用编辑器必须熟悉 React,如果不了解建议使用速搭

本地运行这个项目

  1. npm i 安装依赖
  2. npm run dev 等编译完成后本地打开页面看效果。

在其他项目中使用 amis-editor

npm i amis-editor

使用 方法

import {Editor} from 'amis-editor';


render() {
  return (
    <Editor
      {...props}
    />
  )
}

属性说明:

  • value: any 值,amis 的 json 配置。
  • onChange: (value: any) => void。 当编辑器修改的时候会触发。
  • preview?: boolean 是否为预览状态。
  • autoFocus?: boolean 是否自动聚焦第一个可编辑的组件。
  • plugins 插件类集合

扩充自定义编辑器(旧版)

如何扩充 amis 渲染器,请前往如何注册自定义类型,这里主要介绍如何把自定义的组件加入到编辑器里面来。

示例:

  • ./renderer/MyRenderer.tsx
  • ./editor/MyRenderer.tsx

首先,注册自定义组件的时候需要设置一个 name 属性,这个属性值应该是唯一的。后续注册编辑器是靠这个关联。

如本仓库中示例,name 值为 my-renderer

@Renderer({
    test: /\bmy-renderer$/,
    name: 'my-renderer'
})
export default class MyRenderer extends React.Component<MyRendererProps> {
    static defaultProps = {
        target: 'world'
    };

    render() {
        const {target} = this.props;

        return <p>Hello {target}!</p>;
    }
}

然后开始注册编辑器。

import {RendererEditor, BasicEditor} from 'amis-editor';

@RendererEditor('my-renderer', {
    name: '自定义渲染器',
    description: '这只是个示例',
    // docLink: '/docs/renderers/Nav',
    type: 'my-renderer', // 这个在 scaffold 没设置的时候有用。
    previewSchema: {
        // 用来生成预览图的
        type: 'my-renderer',
        target: 'demo'
    },
    scaffold: {
        // 拖入组件里面时的初始数据
        type: 'my-renderer',
        target: '233'
    }
})
export default class MyRendererEditor extends BasicEditor {
    tipName = '自定义组件';
    settingsSchema = {
        title: '自定义组件配置',
        body: [
            {
                type: 'tabs',
                tabsMode: 'line',
                className: 'm-t-n-xs',
                contentClassName: 'no-border p-l-none p-r-none',
                tabs: [
                    {
                        title: '常规',
                        controls: [
                            {
                                name: 'target',
                                label: 'Target',
                                type: 'text'
                            }
                        ]
                    },

                    {
                        title: '外观',
                        controls: []
                    }
                ]
            }
        ]
    };
}

然后直接看效果吧 https://github.com/fex-team/amis-editor 这里面插入的时候选择输入 my-renderer 然后就可以插入自定义的组件了。

扩充自定义编辑器(新版)

amis-editor 重构了一版,之前定义注册自定义组件的方式也能用,但是已经标记了 deprecated,新的添加自定义编辑器的方式有两种。

  1. registerEditorPlugin 注册全局插件。
  2. 不注册,但是调用 <Editor> 的时候时候通过 plugins 属性传入。

效果都一样,重点还是怎么写个 Plugin,示例:

import {BasePlugin} from 'amis-editor';

export class MyRendererPlugin extends BasePlugin {
    rendererName = 'my-renderer';

    // 暂时只支持这个,配置后会开启代码编辑器
    $schema = '/schemas/UnkownSchema.json';

    // 用来配置名称和描述
    name = '自定义渲染器';
    description = '这只是个示例';

    // tag,决定会在哪个 tab 下面显示的
    tags = ['自定义', '表单项'];

    // 图标
    icon = 'fa fa-user';

    // 用来生成预览图的
    previewSchema = {
        type: 'my-renderer',
        target: 'demo'
    };

    // 拖入组件里面时的初始数据
    scaffold = {
        type: 'my-renderer',
        target: '233'
    };

    // 右侧面板相关
    panelTitle = '自定义组件';
    panelControls = [
        {
            type: 'tabs',
            tabsMode: 'line',
            className: 'm-t-n-xs',
            contentClassName: 'no-border p-l-none p-r-none',
            tabs: [
                {
                    title: '常规',
                    controls: [
                        {
                            name: 'target',
                            label: 'Target',
                            type: 'text'
                        }
                    ]
                },

                {
                    title: '外观',
                    controls: []
                }
            ]
        }
    ];
}

定义好 plugin 后,可以有两种方式启用。

// 方式 1,注册默认插件,所有编辑器实例都会自动实例话。
import {registerEditorPlugin} from 'amis-editor';

registerEditorPlugin(MyRendererPlugin);

// 方式2,只让某些编辑器启用
() => <Editor plugins={[MyRendererPlugin]} />;

前面的示例只做了简单的说明,可用属性还有, 具体还是先看 npm 包里面的 .d.ts 文件吧,后面再补充更详细的文档。

export interface PluginEventListener {
    onActive?: (event: PluginEvent<ActiveEventContext>) => void;

    /**
     * 事件,当有配置项插入前调用。通过 event.preventDefault() 可以干预。
     */
    beforeInsert?: (event: PluginEvent<InsertEventContext>) => false | void;
    afterInsert?: (event: PluginEvent<InsertEventContext>) => void;

    /**
     * 面板里面编辑修改的事件。
     */
    beforeUpdate?: (event: PluginEvent<ChangeEventContext>) => false | void;
    afterUpdate?: (event: PluginEvent<ChangeEventContext>) => void;

    /**
     * 更新渲染器,或者右键粘贴配置。
     */
    beforeReplace?: (event: PluginEvent<ReplaceEventContext>) => false | void;
    afterReplace?: (event: PluginEvent<ReplaceEventContext>) => void;

    /**
     * 移动节点的时候触发,包括上移,下移
     */
    beforeMove?: (event: PluginEvent<MoveEventContext>) => false | void;
    aftterMove?: (event: PluginEvent<MoveEventContext>) => void;

    /**
     * 删除的时候触发
     */
    beforeDelete?: (event: PluginEvent<BaseEventContext>) => false | void;
    afterDelete?: (event: PluginEvent<BaseEventContext>) => void;

    beforeResolveEditorInfo?: (event: PluginEvent<RendererInfoResolveEventContext>) => false | void;
    afterResolveEditorInfo?: (event: PluginEvent<RendererInfoResolveEventContext>) => void;

    beforeResolveJsonSchema?: (event: PluginEvent<RendererJSONSchemaResolveEventContext>) => false | void;
    afterResolveJsonSchema?: (event: PluginEvent<RendererJSONSchemaResolveEventContext>) => void;

    onDndAccept?: (event: PluginEvent<DragEventContext>) => false | void;

    onBuildPanels?: (event: PluginEvent<BuildPanelEventContext>) => void;

    onBuildContextMenus?: (event: PluginEvent<ContextMenuEventContext>) => void;

    onPreventClick?: (event: PluginEvent<PreventClickEventContext>) => false | void;
}

/**
 * 插件的 interface 定义
 */
export interface PluginInterface extends Partial<BasicRendererInfo>, Partial<BasicSubRenderInfo>, PluginEventListener {
    readonly manager: EditorManager;

    order?: number;

    /**
     * 渲染器的名字,关联后不用自己实现 getRendererInfo 了。
     */
    rendererName?: string;

    /**
     * 默认的配置面板信息
     */
    panelIcon?: string;
    panelTitle?: string;
    panelControls?: Array<any>;
    panelDefinitions?: any;
    panelApi?: any;
    panelSubmitOnChange?: boolean;
    panelControlsCreator?: (context: BaseEventContext) => Array<any>;

    /**
     * 返回渲染器信息。不是每个插件都需要。
     */
    getRendererInfo?: (context: RendererInfoResolveEventContext) => BasicRendererInfo | void;

    /**
     * 生成节点的 JSON Schema 的 uri 地址。
     */
    buildJSONSchema?: (context: RendererJSONSchemaResolveEventContext) => void | string;

    /**
     * 构建右上角功能按钮集合
     */
    buildEditorToolbar?: (context: BaseEventContext, toolbars: Array<BasicToolbarItem>) => void;

    /**
     * 构建右键菜单项
     */
    buildEditorContextMenu?: (context: ContextMenuEventContext, menus: Array<ContextMenuItem>) => void;

    /**
     * 构建编辑器面板。
     */
    buildEditorPanel?: (context: BaseEventContext, panels: Array<BasicPanelItem>) => void;

    /**
     * 构建子渲染器信息集合。
     */
    buildSubRenderers?: (
        context: RendererEventContext,
        subRenderers: Array<SubRendererInfo>,
        renderers: Array<RendererConfig>
    ) => BasicSubRenderInfo | Array<BasicSubRenderInfo> | void;
}

More Repositories

1

amis-admin

基于 amis 的后台项目前端模板
HTML
1,478
star
2

amis-react-starter

amis react 初始项目示例
TypeScript
134
star
3

amis-widget

amis组件注册器(支持react、vue2.0、vue3.0和jQuery技术栈),主要用于注册amis渲染器、amis-editor插件。
CSS
89
star
4

amis-widget-cli

amis自定义组件开发工具
JavaScript
53
star
5

amis-formula

负责 amis 里面的表达式实现,内置公式,编辑器等
TypeScript
48
star
6

vue2-amis-demo

Vue
30
star
7

aisuda-docs

这个不用了,换成内部 icode 了
JavaScript
15
star
8

components-playgroud

爱速搭自定义组件本地开发环境
JavaScript
14
star
9

vue2-amis-custom-widget

amis自定义组件模板(vue2.0技术栈)
JavaScript
12
star
10

amis-server

amis 后端辅助工具类
Java
11
star
11

vue3-amis-custom-widget

amis自定义组件模板(vue3.0技术栈)
JavaScript
8
star
12

react-custom-widget-template

amis自定义组件模板(react技术栈)
JavaScript
6
star
13

amis-mock

amis api mock
JavaScript
4
star
14

vue3-aipage-widget

aipage-editor自定义组件注册器(支持react和vue3.0技术栈),用于注册自定义渲染器和插件
TypeScript
3
star
15

aisuda-jssdk-demo

TypeScript
3
star
16

aisuda-templates

CSS
3
star
17

amis-reports-demo

爱速搭报表Demo,爱速搭报表基于 ECharts 实现的图表功能组件,旨在为用户提供简单和快捷的可视化报表能力,帮助用户在爱速搭平台上快速设计常见的数据报表页和大屏报表效果页。
CSS
3
star
18

vue2-aipage-custom-widget

aipage-editor H5自定义组件模板(vue2、react)
JavaScript
2
star
19

react-widget-dev

amis自定义组件模板(react技术栈-带完整webpack工程)
CSS
2
star
20

vue-container-custom-widget-template

amis自定义容器组件模板(vue2.0技术栈、自定义容器组件)
JavaScript
2
star
21

third-auth-mock

用于模拟爱速搭的第三方登录
JavaScript
1
star
22

vue3-aipage-custom-widget-template

aipage-editor H5自定义组件模板(vue3、react)
JavaScript
1
star
23

aipage-widget

aipage-editor组件注册器(支持react和vue2.0技术栈),用于注册自定义渲染器和插件
TypeScript
1
star
24

multiple-custom-widget-template

amis自定义组件模板(多个自定义组件)
JavaScript
1
star
25

uview-custom-form

uview版自定义表单组件模板(vue3技术栈),用于开发小程序表单类组件。
JavaScript
1
star
26

uni-custom-widget-template

aipage-editor uniapp版自定义组件模板(vue3技术栈),用于开发小程序自定义组件。
JavaScript
1
star