yarn add iview-uieditor

config.plugin('copy-iview-uieditor-assets').use(CopyWebpackPlugin, [
  [{
    from: './node_modules/vue-uieditor/vue-uieditor',
    to: './vue-uieditor/'
  },{
    from: './node_modules/iview-uieditor/iview-uieditor',
    to: './iview-uieditor/'
  }]
]);

import 'iview-uieditor';

<iview-uieditor :options="options" :json="json" :theme="theme" />

<iview-uieditor-render :options="options" :json="json" />

<iview-uieditor :options="options" />
<iview-uieditor-render :options="options" />

options: UEOption = UERender.DefineOption({
  mixins:[{
    data(){
      return {
        text:'hello'
      };
    },
    created(){

    }
  }],
  templates: [
      {
        title: "JSON Object",
        group: "测试模板库/测试模板",
        json: {
          type: "uieditor-div"
        },
      },
      {
        title: "Tmpl",
        group: "测试模板库/测试模板",
        template: `<template>
	<uieditor-div>
	</uieditor-div>
</template>`,
      },
    ],
    async extraLib(){
      return `const text:string;`
    },
    global(){
      return {
        _:lodash
      };
    },
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: 'Div 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});

options: UEOption = UERender.DefineOption({
  ...,
  templates: [
      {
        title: "JSON Object",
        group: "测试模板库/测试模板",
        json: {
          type: "uieditor-div"
        },
      },
      {
        title: "Tmpl",
        group: "测试模板库/测试模板",
        template: `<template>
	<uieditor-div>
	</uieditor-div>
</template>`,
      },
    ]
});

<iview-uieditor :theme="theme" />

theme: UETheme = {
  modes: ["json", "script", "tmpl"],
  toolBar: [
    {
      title: "测试",
      click: ({ service }) => {
        this.json = service.getJson();
        console.log('json', JSON.stringify(json));
      },
    }
  ],
  contextmenus({ render, service }) {
    return [
      {
        title: "测 试",
        disabled: !render,
        click: (item) => {
          console.log(
            JSON.stringify(service.getJson(false, render) || {});
          );
        },
      },
    ];
  }
};

theme: UETheme = {
  ...,
  toolBar: [
    {
      title: "测试",
      click: ({ service }) => {
        this.json = service.getJson();
        console.log('json', JSON.stringify(json));
      },
    }
  ]
};

/** 标记为不能选择 */
const UECanNotSelectProps = 'ue-cant-select';
/** 标记为不能移动 */
const UECanNotMoveProps = 'ue-cant-move';
/** 标记为不能删除 */
const UECanNotRemoveProps = 'ue-cant-remove';
/** 标记为不能复制 */
const UECanNotCopyProps = 'ue-cant-copy';
/** 标记为不能选择子节点 */
const UECanNotSelectChildProps = 'ue-cant-select-child';
/** 标记为不能移动子节点 */
const UECanNotMoveChildProps = 'ue-cant-move-child';
/** 标记为不能删除子节点 */
const UECanNotRemoveChildProps = 'ue-cant-remove-child';
/** 标记为不能复制子节点 */
const UECanNotCopyChildProps = 'ue-cant-copy-child';
/** 标记为不能移入子节点 */
const UECanNotMoveInProps = 'ue-cant-movein';
/** 标记为不能移出子节点 */
const UECanNotMoveOutProps = 'ue-cant-moveout';
/** 标记节点是否锁定 */
const UEIsLockProps = 'ue-is-lock';
/** 标记节点是否折叠 */
const UEIsCollapseProps = 'ue-is-collapse';

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: 'Div 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: 'Div 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-img': {
        "editor": {
          text: "Image 图片",
          order: 2,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-picture',
          inline: true,
          attrs: {
            src: {
              order: 0,
              value: './vue-uieditor/assets/images/demo.png',
              effect: true,
            },
            style: { value: 'min-width:30px;min-height:30px' }
          }
        }
      }
    })
});

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: "Div",
          order: 2,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-picture',
          inline: true,
          transferAttr({ service }) {
            console.log('service', service.getJson())
          }
      }
    })
});

setModeUI(mode: UEMode): void;

showMonacoEditorOther(option: MonacoEditorContext): Promise<void>

getTmpl(): string

setTmpl(html:string): Promise<void>

getJson(): string

getJson(json:string | object): Promise<void>

getScript(): string

setScript(script:string): Promise<void>

getCurRender(): UERenderItem

getRenderItem(id: string, context?: UERenderItem): UERenderItem

getRenderByType(type: string, context?: UERenderItem): UERenderItem

getParentRenderItem(render: UERenderItem, all?: boolean): UERenderItem

getParentRenderByType(render: UERenderItem, type: string): UERenderItem

closest(render: UERenderItem, fn: (render: UERenderItem) => boolean): UERenderItem

empty(cnf?: boolean): Promise<void>

getRenderTemp(id: string, key: string): any
getRenderTemp(render: UERenderItem, key: string): any

setRenderTemp(id: string, key: string, value: any): any;
setRenderTemp(render: UERenderItem, key: string, value: any): any;

delCur(cnf?: boolean, norefresh?: boolean): Promise<void>

deleteWidget(parentId: string, id: string, norefresh?: boolean): void

getAttr(id: string, key: string): UETransferEditorAttrsItem

setAttr(id: string, attr: UETransferEditorAttrsItem, refresh?: boolean): Promise<void>

addAttr(id: string, key: string): UETransferEditorAttrsItem;

refresh(): Promise<any>

setCurrent(render: UERenderItem): any;
setCurrent(id: string): any;

addByType(type: string, renderId: string, type2: UEDragType2): Promise<void>;

addByJson(json: any, renderId: string, type2: UEDragType2): Promise<void>;

addByTmpl(template: string, renderId: string, type2: UEDragType2): Promise<void>;

isLocked(render: UERenderItem): boolean;
isLocked(id: string): boolean;

locked(render: UERenderItem, locked: boolean): Promise<any>;
locked(id: string, locked: boolean): Promise<any>;

isCollapse(render: UERenderItem): boolean;
isCollapse(id: string): boolean;

collapse(render: UERenderItem, isCollapse: boolean): Promise<any>;
collapse(id: string, isCollapse: boolean): Promise<any>;

canRemove(render: UERenderItem): boolean;
canRemove(id: string): boolean;

canCopy(render: UERenderItem): boolean;
canCopy(id: string): boolean;

canSelect(render: UERenderItem): boolean;
canSelect(id: string): boolean;

canMove(fromId: string, toId: string, type2: UEDragType2): boolean;

move(fromId: string, toId: string, type2: string): Promise<any>;

copyCur(): void;

copyCurToNext(): void;

cutCur(): void;

pasteCur(pos?: 'before' | 'after' | 'child', keepCur?: boolean, currentId?: string, focus?: boolean): void;