# amis-editor-demo
amis 可视化编辑器, 在线体验：https://aisuda.github.io/amis-editor-demo
要使用编辑器必须熟悉 React，如果不了解建议使用[速搭](https://aisuda.baidu.com/)。
## 本地运行这个项目
1. `npm i` 安装依赖
3. `npm run dev` 等编译完成后本地打开页面看效果。
## 历史版本预览地址
1. [6.11.0(2025.03.12)](https://aisuda.github.io/amis-editor-demo/demo-6.11.0/index.html)
1. [6.7.0(2024.08.06)](https://aisuda.github.io/amis-editor-demo/demo-6.7.0/index.html)
2. [6.0.0(2023.12.29)](https://aisuda.github.io/amis-editor-demo/demo-6.0.0/index.html)
3. [5.6.2(2023.10.31)](https://aisuda.github.io/amis-editor-demo/demo-5.6.2/index.html)
4. [5.6.1(2023.09.28) history模式](https://aisuda.github.io/amis-editor-demo/demo-5.6.1-v2/index.html)
5. [5.6.1(2023.09.28)](https://aisuda.github.io/amis-editor-demo/demo-5.6.1/index.html)
6. [5.4.1(2023.06.09)](https://aisuda.github.io/amis-editor-demo/demo-5.4.1/index.html)
7. [4.1.0-beta.28(2022.05.27)](https://aisuda.github.io/amis-editor-demo/demo-4.1.0-beta.28/index.html)
8. [4.0.2-beta.10(2022.02.23)](https://aisuda.github.io/amis-editor-demo/demo-4.0.2-beta.10/index.html)
9. [3.3.5(2021-08-12)](https://aisuda.github.io/amis-editor-demo/demo-3.3.5/index.html)
## 在其他项目中使用 amis-editor
```
npm i amis-editor
```
使用 方法
```jsx
import {Editor} from 'amis-editor';
render() {
return (
)
}
```
属性说明：
- `value: any` 值，amis 的 json 配置。
- `onChange: (value: any) => void`。 当编辑器修改的时候会触发。
- `preview?: boolean` 是否为预览状态。
- `autoFocus?: boolean` 是否自动聚焦第一个可编辑的组件。
- `plugins` 插件类集合
## 扩充自定义编辑器（旧版）
如何扩充 amis 渲染器，请前往[如何注册自定义类型](https://baidu.github.io/amis/docs/start/custom#%E6%B3%A8%E5%86%8C%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B)，这里主要介绍如何把自定义的组件加入到编辑器里面来。
示例：
- ./renderer/MyRenderer.tsx
- ./editor/MyRenderer.tsx
首先，注册自定义组件的时候需要设置一个 `name` 属性，这个属性值应该是唯一的。后续注册编辑器是靠这个关联。
如本仓库中示例，name 值为 `my-renderer`。
```tsx
@Renderer({
test: /\bmy-renderer$/,
name: 'my-renderer'
})
export default class MyRenderer extends React.Component {
static defaultProps = {
target: 'world'
};
render() {
const {target} = this.props;
return
Hello {target}!
;
}
}
```
然后开始注册编辑器。
```
…
```
然后直接看效果吧 https://github.com/fex-team/amis-editor 这里面插入的时候选择输入 my-renderer 然后就可以插入自定义的组件了。
## 扩充自定义编辑器（新版）
amis-editor 重构了一版，之前定义注册自定义组件的方式也能用，但是已经标记了 `deprecated`，新的添加自定义编辑器的方式有两种。
1. registerEditorPlugin 注册全局插件。
2. 不注册，但是调用 `` 的时候时候通过 `plugins` 属性传入。
效果都一样，重点还是怎么写个 Plugin，示例：
```
…
```
定义好 plugin 后，可以有两种方式启用。
```tsx
// 方式 1，注册默认插件，所有编辑器实例都会自动实例话。
import {registerEditorPlugin} from 'amis-editor';
registerEditorPlugin(MyRendererPlugin);
// 方式2，只让某些编辑器启用
() => ;
```
前面的示例只做了简单的说明，可用属性还有, 具体还是先看 npm 包里面的 .d.ts 文件吧，后面再补充更详细的文档。
```
…
```