页面内实现“预览/编辑”有什么思路吗？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2234 days ago, the information mentioned may be changed or developed.

看到一些平台有类似可视化编辑那种功能。

请问具体实现原理是什么样的

我的想法是。
1.前端同学写好了模板，可编辑的部分用自定义变量占位。
2.平台编辑部分，通过 iframe （？）嵌入 html 模板，然后后端根据读取变量来替换。

实际上是这样的吗？

变量

模板

编辑

iframe

11 replies • 2020-04-28 11:21:18 +08:00

zjsxwc

Apr 27, 2020 via Android

参考各种 cms 的实现呗，比如 Drupal 是通过模板引擎占位与各种插件配合

islxyqwe

Apr 27, 2020

通用点就 markdown

iConnect

Apr 27, 2020 via Android

参考语雀的实现方式呗，基本上该有的功能都实现啦

Leon6868

Apr 27, 2020

什么是可视化编辑？可以详细讲一下吗

如果是编辑并预览 html，可以直接在前端构建 html 并用 window.open()直接传入 iframe 。

runoob 的编辑器就是这样搞的：
https://www.runoob.com/try/try.php?filename=tryhtml_intro
http://c.runoob.com/front-end/61

kuoruan

Apr 27, 2020

提供一个思路：

前端传递参数请求后端，后端直接将页面渲染好后的内容返回，格式自定。

然后

```
const blob = new Blob([html], { type: "text/html" });
const url = (URL || webkitURL).createObjectURL(blob);
```

用 iframe 打开这个 url 即可，支持 IE10+

zqx

Apr 27, 2020 via Android

可以完全在前端实现的，输入区域的事件监听器触发预览区域的渲染逻辑就可以了

otakustay

Apr 27, 2020

https://edtr.io/

luoyou1014

Apr 27, 2020

document.execCommand()

自己可以尝试实现下，比想象中的简单很多，直接用原生的接口就可以了。

ke1vin

Apr 27, 2020

你说的是类似邮箱里可视化 html 那种吗，好像没什么难度

hubqin

Apr 28, 2020

之前写过一个店铺装修功能，使用 vue 的数据 v-model 数据双向绑定，编辑区域数据编辑后，会传递给 vue 实例，预览区域读取 vue 的数据渲染。

mrrong

Apr 28, 2020

可以参考下 layoutit 这个插件，基于 bootstrap 布局，中间插入部分可以自己写插件，建造完成有预览功能，可以自动生成代码，编辑功能自己写，提前定义页面规则，拉取相应 css，进行修改后保存代码，其余的，像修改某个组件的 class，id 等，可以基于 layoutit 的编辑功能进行扩展。其中细节可以自己定义怎么实现。写的很乱，有问题或者建议可以再问我~