如何制作像易企秀一样的可视化H5编辑器?

Question

可视化编辑器具有通用的组件 (文字, 图片)支持组件的样式, 动画, 事件等....

Answer 1

我做过类似的可视化编辑工具

总的思路在于一个中间文件，

你在拖拽的时候，生成一个布局文件，比如 layout.json

{
    type:'View',
    props:{
        x:10,
        y:10,
        //....
    },
    children:[
        {
            type:'Image',
            props:{
                src:'bg.png',
                //...
            }
        },
        {
            type:'Text',
            props:{
                txt:'一段文本',
                //...
            }
        }
    ]
}

然后可以根据layout.json解析成对应的页面（Web）

<div>
    <img src="bg.png">
    <p>一段文本</p></div>

同时，这个布局文件也可以根据需要生成其他终端，比如安卓

希望我的建议有用，谢谢

Answer 2

可以参考H5DS，百度一下就可以了