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