代码拉取完成,页面将自动刷新
同步操作将从 openwjh/amis-editor-demo 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
amis 可视化编辑器, 在线体验:http://aisuda.github.io/amis-editor-demo
要使用编辑器必须熟悉 React,如果不了解建议使用速搭。
npm i
安装依赖npm start
开服务npm run dev
开始编译,等编译出现时间信息后就可以刷新页面看效果了。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
是否自动聚焦第一个可编辑的组件。如何扩充 amis 渲染器,请前往如何注册自定义类型,这里主要介绍如何把自定义的组件加入到编辑器里面来。
示例:
首先,注册自定义组件的时候需要设置一个 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: '自定义组件配置',
controls: [
{
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 未开源,但可以免费使用(包括商用)。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。