我们想要做一个页面装饰编辑器.
目前的情况是每次运营有页面改版需求时,都要我们开发来写 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
|