求可视化的 html 编辑器思路

[zjsxwc]

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

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

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

====

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

[learnshare]

想太多了，不容易做，让运营去用第三方 H5 工具自己做页面吧

[zjsxwc]

@learnshare

也是个思路, 不过使用第三方专业的工具来编辑 html 内容时,
需要解决 2 个问题
1. 运营如何方便的上传图片,并获取图片地址.
2. 运营如何方便获取我们自己的产品等数据来编辑.

[droiz]

正在维护公司内的可视化编辑器，说下大概思路：

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

保存时提交这个大 object

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

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

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

不过这样会有实时性的问题，受限于公司其他的产品方案，暂时只能这样，不过可以使用 cron 定时更新页面。

[learnshare]

@zjsxwc 图片存储都是服务里会提供的，只需要上传；产品数据手写就好了
主要是第三方服务提供了完善的工具和流程，每月只需要付费就好了，自己做成本不低

[murmur]

给你个思路，除了中间的 container，所有的地方都是绝对布局和钉死的尺寸，兼容性好的 1b，各种所见即所得
什么你说移动端？

[yejinmo]

楼主还是考虑直接用第三方吧，推荐一个 https://www.froala.com/wysiwyg-editor
自己做的话时间成本实在太高了，还有各种坑。
有个需求还要 Windows 客户端的编辑器，正发愁怎么做呢

[learnshare]

@yejinmo 我讲的是这种 http://maka.im/ 不是你说的这个

[SourceMan]

<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]

@learnshare

...产品数据太多会把运营逼疯的

[xi2008wang]

最好在公司做过一套这样的可视化布局系统，用于自定义报表。开源的可以看看这个 http://layoutit.justjavac.com/

[xi2008wang]

说一下做法：

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

预览步骤：
在渲染 html 时，js 以图形 id 为参数 ajax 获取图形数据，渲染出图

[doubleflower]

这种格式不多的话可以定制一套语法绕开 html，比如类 markdown，这样也不需要可视化编辑了，也方便加业务组件

[fox0001]

chrome 按 F12 可修改页面，改好后另存为

[hahamy]

@yejinmo froala 在线体验了下，功能不错，有点小贵，100 刀一个域名

[chairuosen]

如果只是改排版和内容布局排序，其实简单点，不需要对实际的页面进行编辑，针对 json 生成一个模块的表单来编辑，模块是事先抽象好的，右侧实时渲染出内容 Html 套在一个模板里就可以。
写过一个类似的 http://demo.ruosen.io/email_template/

[fuermosi777]

我做过类似的，前端用 react，模块拖拽编辑，保存为 jade 模板文件，自己写了一个引擎把 jade 和 react 模块的互换，需要使用的时候再 parse 成 html

[ourai]

我们团队正在做这种东西，过后可以考虑写篇文章出来。

[mlhorizon]

看看这个： http://editor.ory.am/
按块编辑，体验挺好的。

[anyforever]

@mlhorizon 这个挺厉害。
不过这知道这东西给什么人在什么场景下用。不懂点 HTML 的编辑用着会不会有点难度？

[SmiteChow]

django cms