这是一个创建于 2585 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们想要做一个页面装饰编辑器.
目前的情况是每次运营有页面改版需求时,都要我们开发来写 html 更改页面, 想要一个编辑器, 能够让运营通过图形界面操作就能完成首页改版的操作, 不需要开发再介入.
说白了就是个可视化的 html 编辑器, 服务端会提供接口来保存编辑结果数据, 如何设计对保存结果的 json 数据格式? 如何设计对保存编辑结果数据的渲染器? 如何设计一套组件机制能够在之后方便的增加装饰组件?
====
github 上有什么项目可以参考?
 |
1
learnshare 2017-10-13 10:23:02 +08:00  1
想太多了，不容易做，让运营去用第三方 H5 工具自己做页面吧
|
 |
2
zjsxwc OP @learnshare
也是个思路, 不过使用第三方专业的工具来编辑 html 内容时, 需要解决 2 个问题 1. 运营如何方便的上传图片,并获取图片地址. 2. 运营如何方便获取我们自己的产品等数据来编辑. |
 |
3
droiz 2017-10-13 10:40:51 +08:00 2
正在维护公司内的可视化编辑器，说下大概思路：
用了 react，前端拖拽进行编辑，这个简单。编辑完成的结果就是内容区域为一个 react 组件的大 object。 保存时提交这个大 object 服务端收到保存请求后使用 react server render 将这个大 object 转换为 html 字符串，将它与页面的一些基本结构拼接，保存到数据库里，用户请求时直接返回数据库里生成好的 html 字符串。 同时数据库里存储刚刚的大 object，以后这个页面有编辑需要时直接将这个 object 返回给前端，前端根据它照常渲染即可。 这样就形成了一套可重复编辑 /发布的流程。 不过这样会有实时性的问题，受限于公司其他的产品方案，暂时只能这样，不过可以使用 cron 定时更新页面。 |
|
4
learnshare 2017-10-13 11:00:58 +08:00
@zjsxwc 图片存储都是服务里会提供的，只需要上传；产品数据手写就好了
主要是第三方服务提供了完善的工具和流程，每月只需要付费就好了，自己做成本不低 |
 |
5
murmur 2017-10-13 11:06:31 +08:00 1
给你个思路，除了中间的 container，所有的地方都是绝对布局和钉死的尺寸，兼容性好的 1b，各种所见即所得
什么你说移动端？ |
 |
6
yejinmo 2017-10-13 11:08:20 +08:00
楼主还是考虑直接用第三方吧，推荐一个 https://www.froala.com/wysiwyg-editor
自己做的话时间成本实在太高了，还有各种坑。 有个需求还要 Windows 客户端的编辑器，正发愁怎么做呢 |
|
7
learnshare 2017-10-13 11:26:21 +08:00
@yejinmo 我讲的是这种 http://maka.im/ 不是你说的这个
|
 |
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 就是辣么简单 |
|
9
zjsxwc OP |
 |
10
xi2008wang 2017-10-13 13:06:58 +08:00 1
最好在公司做过一套这样的可视化布局系统，用于自定义报表。开源的可以看看这个 http://layoutit.justjavac.com/
|
|
11
xi2008wang 2017-10-13 13:21:55 +08:00
说一下做法：
生成步骤： 固定 html 的组件：框架，标题，固定的文字段落，直接 html 保存起来。 图片组件，上传接口上传图片，返回连接，将链接写入到 html。 报表最重要的是内部图形，我们封装成了图形组件，以 id 存储到 html 里 预览步骤： 在渲染 html 时，js 以图形 id 为参数 ajax 获取图形数据，渲染出图 |
 |
12
doubleflower 2017-10-13 13:51:05 +08:00
这种格式不多的话可以定制一套语法绕开 html，比如类 markdown，这样也不需要可视化编辑了，也方便加业务组件
|
 |
13
fox0001 2017-10-13 13:55:57 +08:00
chrome 按 F12 可修改页面，改好后另存为
|
 |
15
chairuosen 2017-10-13 14:53:14 +08:00 1
如果只是改排版和内容布局排序，其实简单点，不需要对实际的页面进行编辑，针对 json 生成一个模块的表单来编辑，模块是事先抽象好的，右侧实时渲染出内容 Html 套在一个模板里就可以。
写过一个类似的 http://demo.ruosen.io/email_template/ |
 |
16
fuermosi777 2017-10-13 15:16:53 +08:00
我做过类似的，前端用 react，模块拖拽编辑，保存为 jade 模板文件，自己写了一个引擎把 jade 和 react 模块的互换，需要使用的时候再 parse 成 html
|
 |
17
ourai 2017-10-13 15:38:43 +08:00
我们团队正在做这种东西，过后可以考虑写篇文章出来。
|
 |
18
mlhorizon 2017-10-13 16:31:05 +08:00
看看这个： http://editor.ory.am/
按块编辑，体验挺好的。 |
 |
19
anyforever 2017-10-13 17:26:01 +08:00
@mlhorizon 这个挺厉害。
不过这知道这东西给什么人在什么场景下用。不懂点 HTML 的编辑用着会不会有点难度？ |
 |
20
SmiteChow 2017-10-13 17:57:25 +08:00
django cms
|
 |
21
TimePPT 2017-10-13 22:43:35 +08:00
可视化 CMS 后台，门户时代就有……
|
 |
22
Dzinlife 2017-10-14 01:52:46 +08:00 via iPhone
其实各种看似高级的往往不解决问题，编辑运营没那个操作水平，简单直接的才能用得起来。不然不会这么多年了广泛使用的只有 WP 和 Drupal。
曾做过一个直接在图片上画热区然后选择动作的编辑器，应付各种运营活动相当实用，几乎不需要开发参与了。不过这都跟业务相关，没有什么通吃的方案，只能根据需求来定制。 |
 |
23
qiutianaimeili 2017-10-14 07:41:39 +08:00
|
 |
24
cntchen 2018-05-22 09:44:01 +08:00
|
 |
25
b1ncer 2018-08-04 14:56:05 +08:00 1
|
Select Language