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

求可视化的 html 编辑器思路

  •  1
     
  •   zjsxwc ·
    zjsxwc · 2017-10-13 10:16:51 +08:00 · 8422 次点击
    这是一个创建于 2605 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们想要做一个页面装饰编辑器.

    目前的情况是每次运营有页面改版需求时,都要我们开发来写 html 更改页面, 想要一个编辑器, 能够让运营通过图形界面操作就能完成首页改版的操作, 不需要开发再介入.

    说白了就是个可视化的 html 编辑器, 服务端会提供接口来保存编辑结果数据, 如何设计对保存结果的 json 数据格式? 如何设计对保存编辑结果数据的渲染器? 如何设计一套组件机制能够在之后方便的增加装饰组件?

    ====

    github 上有什么项目可以参考?

    25 条回复    2018-08-04 14:56:05 +08:00
    learnshare
        1
    learnshare  
       2017-10-13 10:23:02 +08:00   ❤️ 1
    想太多了,不容易做,让运营去用第三方 H5 工具自己做页面吧
    zjsxwc
        2
    zjsxwc  
    OP
       2017-10-13 10:30:59 +08:00
    @learnshare

    也是个思路, 不过使用第三方专业的工具来编辑 html 内容时,
    需要解决 2 个问题
    1. 运营如何方便的上传图片,并获取图片地址.
    2. 运营如何方便获取我们自己的产品等数据来编辑.
    droiz
        3
    droiz  
       2017-10-13 10:40:51 +08:00   ❤️ 2
    正在维护公司内的可视化编辑器,说下大概思路:

    用了 react,前端拖拽进行编辑,这个简单。编辑完成的结果就是内容区域为一个 react 组件的大 object。

    保存时提交这个大 object

    服务端收到保存请求后使用 react server render 将这个大 object 转换为 html 字符串,将它与页面的一些基本结构拼接,保存到数据库里,用户请求时直接返回数据库里生成好的 html 字符串。

    同时数据库里存储刚刚的大 object,以后这个页面有编辑需要时直接将这个 object 返回给前端,前端根据它照常渲染即可。

    这样就形成了一套可重复编辑 /发布的流程。

    不过这样会有实时性的问题,受限于公司其他的产品方案,暂时只能这样,不过可以使用 cron 定时更新页面。
    learnshare
        4
    learnshare  
       2017-10-13 11:00:58 +08:00
    @zjsxwc 图片存储都是服务里会提供的,只需要上传;产品数据手写就好了
    主要是第三方服务提供了完善的工具和流程,每月只需要付费就好了,自己做成本不低
    murmur
        5
    murmur  
       2017-10-13 11:06:31 +08:00   ❤️ 1
    给你个思路,除了中间的 container,所有的地方都是绝对布局和钉死的尺寸,兼容性好的 1b,各种所见即所得
    什么你说移动端?
    yejinmo
        6
    yejinmo  
       2017-10-13 11:08:20 +08:00
    楼主还是考虑直接用第三方吧,推荐一个 https://www.froala.com/wysiwyg-editor
    自己做的话时间成本实在太高了,还有各种坑。
    有个需求还要 Windows 客户端的编辑器,正发愁怎么做呢
    learnshare
        7
    learnshare  
       2017-10-13 11:26:21 +08:00
    @yejinmo 我讲的是这种 http://maka.im/ 不是你说的这个
    SourceMan
        8
    SourceMan  
       2017-10-13 11:27:46 +08:00
    <div contenteditable="true">
    This text can be edited by the user.
    </div>

    https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_Editable
    就是辣么简单
    zjsxwc
        9
    zjsxwc  
    OP
       2017-10-13 11:28:41 +08:00
    @learnshare

    ...产品数据太多会把运营逼疯的
    xi2008wang
        10
    xi2008wang  
       2017-10-13 13:06:58 +08:00   ❤️ 1
    最好在公司做过一套这样的可视化布局系统,用于自定义报表。开源的可以看看这个 http://layoutit.justjavac.com/
    xi2008wang
        11
    xi2008wang  
       2017-10-13 13:21:55 +08:00
    说一下做法:

    生成步骤:
    固定 html 的组件:框架,标题,固定的文字段落,直接 html 保存起来。
    图片组件,上传接口上传图片,返回连接,将链接写入到 html。
    报表最重要的是内部图形,我们封装成了图形组件,以 id 存储到 html 里

    预览步骤:
    在渲染 html 时,js 以图形 id 为参数 ajax 获取图形数据,渲染出图
    doubleflower
        12
    doubleflower  
       2017-10-13 13:51:05 +08:00
    这种格式不多的话可以定制一套语法绕开 html,比如类 markdown,这样也不需要可视化编辑了,也方便加业务组件
    fox0001
        13
    fox0001  
       2017-10-13 13:55:57 +08:00
    chrome 按 F12 可修改页面,改好后另存为
    hahamy
        14
    hahamy  
       2017-10-13 14:33:10 +08:00
    @yejinmo froala 在线体验了下,功能不错,有点小贵,100 刀一个域名
    chairuosen
        15
    chairuosen  
       2017-10-13 14:53:14 +08:00   ❤️ 1
    如果只是改排版和内容布局排序,其实简单点,不需要对实际的页面进行编辑,针对 json 生成一个模块的表单来编辑,模块是事先抽象好的,右侧实时渲染出内容 Html 套在一个模板里就可以。
    写过一个类似的 http://demo.ruosen.io/email_template/
    fuermosi777
        16
    fuermosi777  
       2017-10-13 15:16:53 +08:00
    我做过类似的,前端用 react,模块拖拽编辑,保存为 jade 模板文件,自己写了一个引擎把 jade 和 react 模块的互换,需要使用的时候再 parse 成 html
    ourai
        17
    ourai  
       2017-10-13 15:38:43 +08:00
    我们团队正在做这种东西,过后可以考虑写篇文章出来。
    mlhorizon
        18
    mlhorizon  
       2017-10-13 16:31:05 +08:00
    看看这个: http://editor.ory.am/
    按块编辑,体验挺好的。
    anyforever
        19
    anyforever  
       2017-10-13 17:26:01 +08:00
    @mlhorizon 这个挺厉害。
    不过这知道这东西给什么人在什么场景下用。不懂点 HTML 的编辑用着会不会有点难度?
    SmiteChow
        20
    SmiteChow  
       2017-10-13 17:57:25 +08:00
    django cms
    TimePPT
        21
    TimePPT  
       2017-10-13 22:43:35 +08:00
    可视化 CMS 后台,门户时代就有……
    Dzinlife
        22
    Dzinlife  
       2017-10-14 01:52:46 +08:00 via iPhone
    其实各种看似高级的往往不解决问题,编辑运营没那个操作水平,简单直接的才能用得起来。不然不会这么多年了广泛使用的只有 WP 和 Drupal。

    曾做过一个直接在图片上画热区然后选择动作的编辑器,应付各种运营活动相当实用,几乎不需要开发参与了。不过这都跟业务相关,没有什么通吃的方案,只能根据需求来定制。
    b1ncer
        25
    b1ncer  
       2018-08-04 14:56:05 +08:00   ❤️ 1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   936 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 20:48 · PVG 04:48 · LAX 12:48 · JFK 15:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.