蚂蚁金服的在线预览编辑模板是怎么实现的？原理是啥？

Question

!

生成代码。并且可预览，这个实现原理是什么？现在公司需要做一个类型的项目。
蚂蚁金服的地址:https://motion.ant.design/edi...

Answer 1

这种项目其实有很多个，什么易企秀之类的，现在可以说到处都是
本质其实你预览的部分就是个iframe……也就是生成后的代码。
每个控件应该会对应2种代码，1是用于预览的、2是用于实际生产的。——因为2者之间还是有些许区别的。
然后就是点击iframe内部空间调用外部对应的配置模板，修改数据后反馈进iframe

Answer 2

http://www.zhangxinxu.com/wor... 可以看下这篇文章
比如这个 https://www.onlinehtmleditor....
每次的修改都会同步到iframe标签里