这是一个创建于 1666 天前的主题，其中的信息可能已经有所发展或是发生改变。
看到一些平台有类似可视化编辑那种功能。
请问具体实现原理是什么样的
我的想法是。
1.前端同学写好了模板，可编辑的部分用自定义变量占位。
2.平台编辑部分，通过 iframe （？）嵌入 html 模板，然后后端根据读取变量 来替换。
实际上是这样的吗？
请问具体实现原理是什么样的
我的想法是。
1.前端同学写好了模板，可编辑的部分用自定义变量占位。
2.平台编辑部分，通过 iframe （？）嵌入 html 模板，然后后端根据读取变量 来替换。
实际上是这样的吗？
 |
1
zjsxwc 2020-04-27 10:06:05 +08:00 via Android
参考各种 cms 的实现呗，比如 Drupal 是通过模板引擎占位与各种插件配合
|
 |
2
islxyqwe 2020-04-27 10:19:03 +08:00
通用点就 markdown
|
 |
3
iConnect 2020-04-27 10:22:17 +08:00 via Android
参考语雀的实现方式呗，基本上该有的功能都实现啦
|
 |
4
Leon6868 2020-04-27 10:34:46 +08:00
什么是可视化编辑？可以详细讲一下吗
如果是编辑并预览 html，可以直接在前端构建 html 并用 window.open()直接传入 iframe 。 runoob 的编辑器就是这样搞的： https://www.runoob.com/try/try.php?filename=tryhtml_intro http://c.runoob.com/front-end/61 |
 |
5
kuoruan 2020-04-27 12:09:15 +08:00
提供一个思路：
前端传递参数请求后端，后端直接将页面渲染好后的内容返回，格式自定。 然后 ``` const blob = new Blob([html], { type: "text/html" }); const url = (URL || webkitURL).createObjectURL(blob); ``` 用 iframe 打开这个 url 即可，支持 IE10+ |
 |
6
zqx 2020-04-27 12:49:23 +08:00 via Android
可以完全在前端实现的，输入区域的事件监听器触发预览区域的渲染逻辑就可以了
|
 |
7
otakustay 2020-04-27 13:11:29 +08:00
|
 |
8
luoyou1014 2020-04-27 14:07:46 +08:00  1
document.execCommand()
自己可以尝试实现下，比想象中的简单很多，直接用原生的接口就可以了。 |
 |
9
ke1vin 2020-04-27 19:32:51 +08:00
你说的是类似邮箱里可视化 html 那种吗，好像没什么难度
|
 |
10
hubqin 2020-04-28 09:16:03 +08:00
之前写过一个店铺装修功能，使用 vue 的数据 v-model 数据双向绑定，编辑区域数据编辑后，会传递给 vue 实例，预览区域读取 vue 的数据渲染。
|
 |
11
mrrong 2020-04-28 11:21:18 +08:00
可以参考下 layoutit 这个插件，基于 bootstrap 布局，中间插入部分可以自己写插件，建造完成有预览功能，可以自动生成代码，编辑功能自己写，提前定义页面规则，拉取相应 css，进行修改后保存代码，其余的，像修改某个组件的 class，id 等，可以基于 layoutit 的编辑功能进行扩展。其中细节可以自己定义怎么实现。写的很乱，有问题或者建议可以再问我~
|
Select Language