VUE 可视化编辑器 (vue-uieditor)

yarn add vue-uieditor

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

import Vue from 'vue';
import VueUieditor from 'vue-uieditor';

Vue.use(VueUieditor);

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

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

<vue-uieditor :options="options" />
<vue-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
        }
      }
    })
});

templates: UETemplate

- 设置模板到编辑器左边树

```ts
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 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});
``` **Наименование** | **Тип** | **Значение по умолчанию** | **Описание**
| --- | --- | --- |
| 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

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

static DefineOption(options: UEOption): UEOption;

static DefineTransfer(transfer: UETransfer): UETransfer;