文件列表:

.prettierrc (355, 2023-08-21)
amis.config.js (2782, 2023-08-21)
demo (0, 2023-08-21)
demo\css.worker.js (880217, 2023-08-21)
demo\css.worker.js.LICENSE.txt (195, 2023-08-21)
demo\css (0, 2023-08-21)
demo\css\1813.84c415b0.css (92099, 2023-08-21)
demo\css\696.295ff17d.css (35066, 2023-08-21)
demo\css\index.18129264.css (8546, 2023-08-21)
demo\css\vendor.57580a70.css (2927233, 2023-08-21)
demo\editor.html (1016, 2023-08-21)
demo\editor.worker.js (130144, 2023-08-21)
demo\editor.worker.js.LICENSE.txt (195, 2023-08-21)
demo\fonts (0, 2023-08-21)
demo\fonts\codicon.59002d8.ttf (68156, 2023-08-21)
demo\fonts\fa-brands-400.2285773.woff (89988, 2023-08-21)
demo\fonts\fa-brands-400.23f19bb.eot (134294, 2023-08-21)
demo\fonts\fa-brands-400.527940b.ttf (133988, 2023-08-21)
demo\fonts\fa-brands-400.d878b0a.woff2 (76736, 2023-08-21)
demo\fonts\fa-regular-400.491974d.ttf (33736, 2023-08-21)
demo\fonts\fa-regular-400.77206a6.eot (34034, 2023-08-21)
demo\fonts\fa-regular-400.7a33376.woff2 (13224, 2023-08-21)
demo\fonts\fa-regular-400.bb58e57.woff (16276, 2023-08-21)
demo\fonts\fa-solid-900.1551f4f.woff2 (78268, 2023-08-21)
demo\fonts\fa-solid-900.9bbb245.eot (203030, 2023-08-21)
demo\fonts\fa-solid-900.be9ee23.ttf (202744, 2023-08-21)
demo\fonts\fa-solid-900.eeccf4f.woff (101648, 2023-08-21)
demo\fonts\iconfont.3f488f9.eot (177748, 2023-08-21)
demo\fonts\iconfont.66e4ab6.woff (115860, 2023-08-21)
demo\fonts\iconfont.d264fb0.ttf (196491, 2023-08-21)
demo\html.worker.js (568559, 2023-08-21)
demo\html.worker.js.LICENSE.txt (195, 2023-08-21)
demo\img (0, 2023-08-21)
demo\img\empty.6dbcbb4.png (12229, 2023-08-21)
demo\img\fa-brands-400.2f517e0.svg (747927, 2023-08-21)
demo\img\fa-regular-400.4689f52.svg (144714, 2023-08-21)
demo\img\fa-solid-900.7a8b4f1.svg (918991, 2023-08-21)
... ...

# amis-editor-demo amis 可视化编辑器, 在线体验:https://aisuda.github.io/amis-editor-demo 要使用编辑器必须熟悉 React,如果不了解建议使用[速搭](https://aisuda.baidu.com/)。 ## 本地运行这个项目 1. `npm i` 安装依赖 3. `npm run dev` 等编译完成后本地打开页面看效果。 ## 在其他项目中使用 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}!

; } } ``` 然后开始注册编辑器。 ```tsx 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. 不注册,但是调用 `` 的时候时候通过 `plugins` 属性传入。 效果都一样,重点还是怎么写个 Plugin,示例: ```tsx 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 后,可以有两种方式启用。 ```tsx // 方式 1,注册默认插件,所有编辑器实例都会自动实例话。 import {registerEditorPlugin} from 'amis-editor'; registerEditorPlugin(MyRendererPlugin); // 方式2,只让某些编辑器启用 () => ; ``` 前面的示例只做了简单的说明,可用属性还有, 具体还是先看 npm 包里面的 .d.ts 文件吧,后面再补充更详细的文档。 ```tsx export interface PluginEventListener { onActive?: (event: PluginEvent) => void; /** * 事件,当有配置项插入前调用。通过 event.preventDefault() 可以干预。 */ beforeInsert?: (event: PluginEvent) => false | void; afterInsert?: (event: PluginEvent) => void; /** * 面板里面编辑修改的事件。 */ beforeUpdate?: (event: PluginEvent) => false | void; afterUpdate?: (event: PluginEvent) => void; /** * 更新渲染器,或者右键粘贴配置。 */ beforeReplace?: (event: PluginEvent) => false | void; afterReplace?: (event: PluginEvent) => void; /** * 移动节点的时候触发,包括上移,下移 */ beforeMove?: (event: PluginEvent) => false | void; aftterMove?: (event: PluginEvent) => void; /** * 删除的时候触发 */ beforeDelete?: (event: PluginEvent) => false | void; afterDelete?: (event: PluginEvent) => void; beforeResolveEditorInfo?: (event: PluginEvent) => false | void; afterResolveEditorInfo?: (event: PluginEvent) => void; beforeResolveJsonSchema?: (event: PluginEvent) => false | void; afterResolveJsonSchema?: (event: PluginEvent) => void; onDndAccept?: (event: PluginEvent) => false | void; onBuildPanels?: (event: PluginEvent) => void; onBuildContextMenus?: (event: PluginEvent) => void; onPreventClick?: (event: PluginEvent) => false | void; } /** * 插件的 interface 定义 */ export interface PluginInterface extends Partial, Partial, PluginEventListener { readonly manager: EditorManager; order?: number; /** * 渲染器的名字,关联后不用自己实现 getRendererInfo 了。 */ rendererName?: string; /** * 默认的配置面板信息 */ panelIcon?: string; panelTitle?: string; panelControls?: Array; panelDefinitions?: any; panelApi?: any; panelSubmitOnChange?: boolean; panelControlsCreator?: (context: BaseEventContext) => Array; /** * 返回渲染器信息。不是每个插件都需要。 */ getRendererInfo?: (context: RendererInfoResolveEventContext) => BasicRendererInfo | void; /** * 生成节点的 JSON Schema 的 uri 地址。 */ buildJSONSchema?: (context: RendererJSONSchemaResolveEventContext) => void | string; /** * 构建右上角功能按钮集合 */ buildEditorToolbar?: (context: BaseEventContext, toolbars: Array) => void; /** * 构建右键菜单项 */ buildEditorContextMenu?: (context: ContextMenuEventContext, menus: Array) => void; /** * 构建编辑器面板。 */ buildEditorPanel?: (context: BaseEventContext, panels: Array) => void; /** * 构建子渲染器信息集合。 */ buildSubRenderers?: ( context: RendererEventContext, subRenderers: Array, renderers: Array ) => BasicSubRenderInfo | Array | void; } ```

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：