1 Star 0 Fork 8

jermyn / react-visual-editor

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

react-visual-editor

项目于2020.2.22开源,开源不易需要你的支持与鼓励,如果有功能上的想法可以提issue,我会关注并实现。

特性

  • :fire:任意拖拽嵌套:通过组件预览面板拖拽组件,到设计面板实现任意嵌套,设计面板中的组件也可随意拖拽嵌套
  • :computer:实时预览:设计面板中会实时展示组件的属性效果和样式效果,并且与真实页面无异
  • :christmas_tree:DomTree展示:页面组件dom树的展示并实现组件dom实时追踪
  • :gift:可视化属性配置:结合React 特性和JS语法定制了可视化的组件属性配置,实现复杂数据结构的可视化配置
  • :fireworks:可视化样式配置:通过样式配置面板修改样式,实时在页面中显示样式效果
  • :video_camera:模板功能:可以选中局部或者整个页面做为可复用的模板,提高页面配置效率减少重复工作
  • :lock:组件约束:根据组件特性,可以配置组件的父组件约束与子组件约束,解决组件间的错误嵌套和报错
  • :eyeglasses:预览与代码生成:可随时预览页面的真实效果,和页面的jsx代码与样式代码
  • :four_leaf_clover:多平台支持 :支持PC与移动端多型号设配切换展示
  • :dvd:组件库替换:通过简单的配置可以对接任何React组件库

SNAPSHOT

mobile

PC

Usage

// 下载项目单独运行
git clone https://github.com/anye931123/react-visual-editor.git
npm install 
npm run dev

// umi项目可通过添加block方式添加此项目
umi block add https://github.com/anye931123/react-visual-editor

目录结构

- src
  |- components
  |- configs   //全局配置信息
     |- componentConfgs  //组件配置信息包括react和html的组件信息
        |- Ant         //Antd组件配置信息
        |- HTML        //html标签配置信息
        |- index.ts           //所有配置信息汇总导出供config使用
     |- htmlCategory.ts   //html组件分类
     |- index.ts    // 配置信息汇总
     |- reactCategory.ts   //react组件分类组件分类
  |- locales
  |- modules
  |- service
  |- types
  |- utils

types

  • CategoryType 组件分类数据结构定义 具体信息已在代码中注释
  • ComponentConfigType 组件信息属性结构定义 具体信息已在代码中注释
  • ConfigTypes 全局配置信息数据结构定义 具体信息已在代码中注释
  • ModelType model数据结构定义

configs

通过配置config可以实现拖拽组件库的替换,更改为你需要的组件库或者组件。具体配置如下

  • OriginalComponents 所有的需要拖拽的原始组件汇总
  • AllComponentConfigs 所有的组件配置信息
  • CONTAINER_CATEGORY 容器组件分类
  • NON_CONTAINER_CATEGORY 非容器组件分类

LICENSE

MIT

MIT License Copyright (c) 2020 anye Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于 React 的可视化编辑,组件自由拖拽,dom实时追踪,组件无限制嵌套组合,保证组件完整性,多平台支持,代码生成,实时预览,项目于2020.2.22开源,喜欢的点颗星支持鼓励一下! 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/jermyn/react-visual-editor.git
git@gitee.com:jermyn/react-visual-editor.git
jermyn
react-visual-editor
react-visual-editor
master

搜索帮助