amis-editor-demo

amis-editor-demo

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

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

本地运行这个项目

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

历史版本预览地址

1. 6.11.0(2025.03.12)
2. 6.7.0(2024.08.06)
3. 6.0.0(2023.12.29)
4. 5.6.2(2023.10.31)
5. 5.6.1(2023.09.28) history模式
6. 5.6.1(2023.09.28)
7. 5.4.1(2023.06.09)
8. 4.1.0-beta.28(2022.05.27)
9. 4.0.2-beta.10(2022.02.23)
10. 3.3.5(2021-08-12)

在其他项目中使用 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>;
    }
}

然后开始注册编辑器。

…

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

扩充自定义编辑器（新版）

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

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

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

…

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

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

registerEditorPlugin(MyRendererPlugin);

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

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

…