IView UIEditor (iview-uieditor)

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/assets/css/app.css';

import Vue from 'vue';
import { IViewUieditor } from 'iview-uieditor';

Vue.use(IViewUieditor);

<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>`,
      }
    ]
});

<vue-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));
      }
    }
  ]
};

theme: UETheme = {
  ...,
  leftBar: {
    show:true,
    filter({item}){ return item.name.indexOf('text') >= 0; }
  }
};

/** Пометить как недоступное для выбора */
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 блочный тег',

*Примечание: в запросе присутствуют фрагменты кода на языке TypeScript, но перевод выполнен без учёта синтаксиса этого языка.* **Состав переменных компонентов**

|  Название   | Тип  | Значение по умолчанию | Описание |
| --- | --- | --- | --- |
| type  | string |  | Название компонента |
| editor  | UETransferEditor |  | Свойства и поведение компонента при редактировании |
| transfer  | Function | (render: UERenderItem, extend?: UETransferExtend): UERenderItem | Преобразует render при рендеринге. Если возвращается пустое значение, то не рендерится |

**editor: UETransferEditor**

Свойства и особенности поведения компонента при редактировании.

```ts
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

Ассистент: К сожалению, в запросе не удалось определить основной язык текста. Однако, исходя из контекста, можно предположить, что это язык TypeScript.

В запросе также присутствуют фрагменты кода, которые не относятся к языку TypeScript, поэтому их перевод невозможен.

Если у вас есть дополнительная информация или уточнения, пожалуйста, сообщите мне, и я постараюсь помочь вам более точно. **getParentRenderByType**

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

**Параметры:**

|  Наименование   | Тип  | Описание |
| --- | --- | --- |
| render  | UERenderItem | узел |
| type  | string | тип |

Возвращает родительский элемент для указанного элемента с указанным типом.

*closest*

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

**Параметры:**

| Наименование   | Тип | Описание |
| --- | --- | --- |
| render | UERenderItem | Узел |
| fn | (render: UERenderItem) => boolean | Функция поиска, возвращающая true |

Находит ближайший элемент, удовлетворяющий условию поиска.

*empty*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| cnf | boolean | false | Отображать ли подтверждающее сообщение |

Очищает содержимое.

*getRenderTemp*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| ------ | --- | --- | --- |
| id | string | — | Идентификатор узла |
| render | UERenderItem | — | Элемент |
| key | string | — | Ключ |

Получает временное содержимое элемента.

*setRenderTemp*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| ------- | --- | --- | --- |
| id | string | — | Идентификатор узла |
| render | UERenderItem | — | Элемент |
| key | string | — | Ключ |
| value | any | — | Значение |

Устанавливает временное содержимое элемента.

*delCur*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| -------- | --- | --- | --- |
| cnf | boolean | true | Отображать ли подтверждающее сообщение |
| norefresh | boolean | false | Не обновлять |

Удаляет выбранный элемент.

*deleteWidget*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| --------- | --- | --- | --- |
| parentId | string | — | Идентификатор родительского элемента |
| id | string | — | Идентификатор элемента |
| norefresh | boolean | false | Не обновлять |

Удаляет элемент по идентификатору.

*getAttr*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| ----------- | --- | --- | --- |
| id | string | — | Идентификатор элемента |
| key | string | — | Ключ атрибута |

Получает атрибут элемента по ключу.

*setAttr*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| ------------- | --- | --- | --- |
| id | string | — | Идентификатор элемента |
| attr | UETransferEditorAttrsItem | — | Атрибут |
| refresh | boolean | yes | Обновлять ли |

Задаёт атрибут элемента.

*addAttr*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| ------------ | --- | --- | --- |
| id | string | — | Идентификатор элемента |
| key | string | — | Ключ атрибута |

Добавляет атрибут к элементу.

*refresh*

refresh(): Promise<any>.

Обновляет данные.

*setCurrent*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| ---------- | --- | --- | --- |
| id | string | — | Идентификатор |
| render | render | — | Элемент |

Выбирает элемент.

*addByType*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| -------------- | --- | --- | --- |
| type | string | — | Тип элемента |
| renderId | string | — | Идентификатор элемента |
| type2 | in, before, after | — | Позиция |

Вставляет элемент в указанный элемент с заданным типом и позицией.

*addByJson*

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

**Параметры:**

| Наименование | Тип | По умолчанию | Описание |
| --------------- | --- | --- | --- |
| json | string, object | — | JSON-объект |
| renderId | string | — | Идентификатор элемента |
| type2 | in, before, after | — | Позиция |

Вставляет элемент из JSON в указанный элемент с заданной позицией.

*addByTmpl*

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

**Параметры:**

| Наименование | Тип |
| --- | --- |
| template | string |
| renderId | string | 
| type2 | UEDragType2 |

Вставляет шаблон в указанный элемент с заданной позицией. **isLocked**

- Определяет, заблокирован ли узел.

```ts
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;