Относительно полная реализация визуального редактора.

React.js Ant Design

Этот проект древний проект, и код в принципе сложен в сопровождении.Сейчас он выложен только для ознакомления.Если интересно,можно реконструировать версию по принципу для достижения более полного визуального редактирования.

Дружеское напоминание: Не рекомендуется вкладывать много сил в команду, чтобы делать подобные вещи (в попытке изменить статус разработки за один шаг). .

Адрес на гитхабе:GitHub.com/credibility198736…

онлайн-пример

Кредит 198736.GitHub.IO/нажмите его-визуальный…

Хостинг на github, первая загрузка будет медленной

снимок экрана:

бегать

npm run build;
npm run start;
# 因为我不太懂 webpack ，不太会配置，这个项目修改代码后实时生效还有问题。。求 pr

характеристика

  • Визуальное редактирование при генерации кода результата в режиме реального времени и отдельном предварительном просмотре
  • Богатые возможности редактирования данных, вы можете редактировать двухмерные свойства компонентов
  • Компоненты могут быть вложены
  • Адаптивная верстка
  • В дополнение к компонентам antd есть также некоторые собственные элементы html, которые можно использовать.

Принципиальный анализ

1. Как реализовать редактирование в реальном времени

Первым шагом является абстрагирование выражения данных всего визуального верстака, которое представляет собой не что иное, как место размещения компонента, кто является родительским компонентом этого компонента и каковы свойства этого компонента.

Как показано ниже:

Основное определение компонента:

title 组件名
type  组件类型（组件真实类名）
can_place 组件是否可以包含子组件
children 组件的子组件，数组类型
is_native 组件是否是原生 html 元素
config  组件可用的配置信息
props 组件配置信息的值，包含样式和属性等

На основе этих значений мы можем визуализировать и редактировать компонент.После редактирования компонента, Будет большая структура данных, представляющая текущее состояние холста, хранящегося в состоянии, Также есть метод, который рендерит весь холст на основе этой структуры данных, Таким образом, каждый раз после любого действия по редактированию мы будем вызывать forceUpdate для перерисовки холста. То есть добавление компонентов, редактирование свойств и отображение холста разделены и связаны большой структурой данных (той, что на картинке)

2. Как сгенерировать обратный код реакции

Согласно структуре данных на рисунке выше, обратный обход может легко генерировать код React.

3. Как определить конфигурацию, доступную для компонента

Определите доступную конфигурацию компонента в pages/coms/xxx, а затем выберите компонент в основном интерфейсе и отредактируйте свойства в «области редактирования свойств» справа.

Давайте посмотрим, какие свойства мы можем определить

Возьмите кнопку в качестве примера

export default {
    "type": "Button",
    "title": "按钮",
    "props": {
        type: 'primary',  // 定义可以配置的 props
        content: '按钮一只', // 定义可以配置的 props
        style: {  // 定义可以配置的样式
            margin: "0px 10px 0px 0px"
        }
    },
    config: {   // 可用的配置项
        type: {   // type 这个配置的描述
            text: "主题",  // 配置的标题
            enum: [       // 可用的枚举，配置时会显示成下拉框
                'primary',
                'default',
                'dashed',
                'danger'
            ]
        },
        icon: {
            text: "图标",
        },
        content: {
            text: '文案',
        },
        style: {  // 可用的样式配置
            width: {  
                text: "宽度",
            },
            margin: {
                text: "外边距",
                type: "4-value" // 一种定制类型，会渲染成 4 个输入框
            }
        }
    },
}

Это самый простой элемент конфигурации, и его можно применить только к самым основным компонентам, но он не будет работать, когда вы сталкиваетесь с такими компонентами, как таблица или хлебная крошка.

4. Расширенная конфигурация (двумерные данные)

Возьмем для примера Breadcrumb, у него есть атрибут источника данных, источник данных представляет собой смешанное выражение массив + объект, таких компонентов много, как нам его определить?

export default {
  "type":"Breadcrumb",
  "title":"面包屑",
  props:{
      routes:[  // 这里是数据源的属性，和默认值
      {
          breadcrumbName:"一级目录",
          path:"#",
        key:1
      },
      {
          breadcrumbName:"二级目录",
          path:"#",
        key:2
      }
    ]
  },
  config:{
      routes:{   // 如何表达这个属性应该如何配置
          text:"项目配置",
          enumobject:[{  // 一种新的类型，enumobject，对象枚举
            key:1,  
            dataIndex:"breadcrumbName",  // 枚举的对象的第一个 key 是什么
            title:"显示文本",    // 枚举的对象的第一个 key 的文本描述
            type:'String',      // 枚举的对象的第一个 key 的类型
          },{
            key:2,
            dataIndex:"path",    // 枚举的对象的第二个 key 是什么
            title:"链接",        // 枚举的对象的第二个 key 的文本描述
            type:'String',      //枚举的对象的第二个 key 的类型
          }]
    }
  }
}

Окончательная область редактирования свойств:

Свойства перечисления граничных объектов

5. Более сложные компоненты

Вы обнаружите, что компонент таблицы не совпадает с вышеперечисленными компонентами, сначала посмотрите на чистую таблицу данных.

На самом деле, здесь все в порядке, но таблица имеет два атрибута, один из которых выражает данные столбца, а другой — данные строки, нам нужны только два перечисления объектов.

{
    config:{
        columns:{
          text:"列管理",
          enumobject:[
            {
              title: '列文本',
              dataIndex: 'title',
              type:"String"
            },
            {
              title: '列key',
              dataIndex: 'dataIndex',
              type:"String"
            }
          ]
        },
        dataSource:{
          text:"值管理",
          enumobject:{
            type:'relative_props_object',
            target:'columns'
          }
        }
    }
}

Здесь реализована ассоциация, которая может связать конфигурацию dataSource со столбцами (relative_props_object)

6. Более сложные формы

Если это просто данные, то все в порядке. А вот другие компоненты можно вложить в таблицу, каждую строку и столбец, подумайте не головная ли это. . Как показано ниже

Каждый столбец таблицы может фактически определять элементы, отображаемые внутри, мы помещаем в него пустой макет в значении по умолчанию. После этого он станет ямой, куда можно будет поместить другие подэлементы.Специфика не будет расширена.Логика здесь сложнее.

Продолжение следует, или смотрите непосредственно на код. .

Категории