V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
firhome
V2EX  ›  程序员

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

  •  
  •   firhome · 2020-04-27 09:57:50 +08:00 · 2433 次点击
    这是一个创建于 1431 天前的主题,其中的信息可能已经有所发展或是发生改变。
    看到一些平台有类似可视化编辑那种功能。

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

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

    实际上是这样的吗?
    11 条回复    2020-04-28 11:21:18 +08:00
    zjsxwc
        1
    zjsxwc  
       2020-04-27 10:06:05 +08:00 via Android
    参考各种 cms 的实现呗,比如 Drupal 是通过模板引擎占位与各种插件配合
    islxyqwe
        2
    islxyqwe  
       2020-04-27 10:19:03 +08:00
    通用点就 markdown
    iConnect
        3
    iConnect  
       2020-04-27 10:22:17 +08:00 via Android
    参考语雀的实现方式呗,基本上该有的功能都实现啦
    Leon6868
        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
    kuoruan
        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+
    zqx
        6
    zqx  
       2020-04-27 12:49:23 +08:00 via Android
    可以完全在前端实现的,输入区域的事件监听器触发预览区域的渲染逻辑就可以了
    otakustay
        7
    otakustay  
       2020-04-27 13:11:29 +08:00
    luoyou1014
        8
    luoyou1014  
       2020-04-27 14:07:46 +08:00   ❤️ 1
    document.execCommand()

    自己可以尝试实现下,比想象中的简单很多,直接用原生的接口就可以了。
    ke1vin
        9
    ke1vin  
       2020-04-27 19:32:51 +08:00
    你说的是类似邮箱里可视化 html 那种吗,好像没什么难度
    hubqin
        10
    hubqin  
       2020-04-28 09:16:03 +08:00
    之前写过一个店铺装修功能,使用 vue 的数据 v-model 数据双向绑定,编辑区域数据编辑后,会传递给 vue 实例,预览区域读取 vue 的数据渲染。
    mrrong
        11
    mrrong  
       2020-04-28 11:21:18 +08:00
    可以参考下 layoutit 这个插件,基于 bootstrap 布局,中间插入部分可以自己写插件,建造完成有预览功能,可以自动生成代码,编辑功能自己写,提前定义页面规则,拉取相应 css,进行修改后保存代码,其余的,像修改某个组件的 class,id 等,可以基于 layoutit 的编辑功能进行扩展。其中细节可以自己定义怎么实现。写的很乱,有问题或者建议可以再问我~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   955 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:24 · PVG 05:24 · LAX 14:24 · JFK 17:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.