推荐一款可视化前端布局器H5-表单设计器（MagicalCoder）-CSDN博客

介绍一款高定制化前端布局器，支持自由定制组件属性，可视化拖拽与编码设计，响应式布局，及与后端数据联动展示。提供丰富API与回调函数，便于系统嵌入与个人定制。

今天给大家介绍一款高定制化的前端纯js的布局器

特性：

自由定制组件和属性	大量api，callback与布局器交互
同时支持可视化拖拽和编码并存设计	表格：合并拆分等功能
自由定位：任意位置都可以放置组件	响应式栅格布局自适应各设备端，一端设计多端运行
可视化js编写器	支持：echarts各类统计组件同时可以联动后端数据实时展示效果
代码可控：自定义各种事件并且控制事件内容	版本更新迅速，bug修复迅雷不及掩耳
支持各类Vue ,Jquery的UI框架嵌入布局器如：Element Antdesign Vant Vuetify Layui Mini	导航树
完善的官方文档	右键操作面板
其他

如果您需要嵌入系统或者做定制个人的布局器实在是首选也不用再造轮子了专心做自己的业务吧

先上一下体验地址

http://lowcode.magicalcoder.com/magicaldrag/start.html

第一步：先预览下布局器吧首次大家要加载资源所以会略慢耐心等待加载完后续再打开就很快了

第二步：通过下面提供的api和回调函数即可与布局器自由交互

/**
* 获取布局器HTML源码
* @return string
*/
MagicalApi.prototype.getHtml=function () {}
/**
* 获取布局器脚本
* @return string
*/
MagicalApi.prototype.getJavascript=function () {}
/**
* 获取布局器根节点json
* @return JSON
*/
MagicalApi.prototype.getRootNode=function () {}
/**
* 能获取表单条目下的控件数据
* @return JSON[]
*/
MagicalApi.prototype.getFormItemNodes = function (){}
/**
* 插入源码到布局器
* @param html 取值=""可以实现清空布局器 string
*/
MagicalApi.prototype.insertHtml=function (html) {}
/**
* 插入javascript脚本请尽量在insertHtml方法之后执行因为大部分脚本操作的是html 必须先有html
* @param javascript 不要="" 可以使用null来重置脚本 string
*/
MagicalApi.prototype.insertJavascript=function (javascript) {}
/**
* 插入html javascript 常用于初始化布局器
* @param html 取值=""可以实现清空布局器 string
* @param javascript 取值=null可以实现重置布局器的脚本千万不要为"" 否则默认脚本不支持工作区不渲染 string
*/
MagicalApi.prototype.insert=function (html,java