Edienilno: 在线文件编辑器,来搭建自己的百度网盘吧
Edienilno: 在线文件编辑器,来搭建自己的百度网盘吧
代码:https://github.com/dna2funs/edienilno
为了更方便家里存储开销记账,于是在家庭内网搭建了一个Raspberry PI提供一个类似于百度网盘的服务:可以新建文件夹和文件,可以编辑不同的文件。为了尽可能地减少dependency,开发不使用任何现有UI复杂框架(Angular, React, Vue),连jQuery也省了,全部裸写JavaScript。
开发进程
主要框架
在css上,bootstrap和clarity 2选1然后选了用的人少的Clarity;Bootstrap有点审美疲劳了…
参照Clarity的规范,写了点header和main view;再参照VSCode的界面,手动模仿了一下它的界面结构:header下留一行做菜单用,main view里最左边是icon nav,左边是tab的items,然后右边是编辑器主体。
目前后端的API全部使用websocket通信机制。后端在wsapi里,每一个js文件代表一个API plugin的模块,比如简单的文件读写操作,查看文件夹,上传大文件等。至于前端,不同的编辑器对应了client里,component plugin的不同js文件,然后通过动态加入的方式加载这些插件。后面肯定还是要使用service worker去优化资源加载的,所以已经有了一个
sw.js
先放在client里还没有在页面里使用。
Monaco Editor集成
更具体的MonacoEditor的开发,还是去参考开发指南吧~这里只是先开个头,后面我们回详解多人同时在线编辑同一个文件的实现。
超大文件上传
原先出过一篇大文件上传的文章,是说切割文件成不同blob然后用HTTP请求把文件上传,从而可以实现调控传输速度、暂停、恢复等断点续传的功能。在这里呢,我们同样把文件切成blob,然后通过更实时的websocket去传输,少了HTTP每个请求的三次TCP握手,传输效率更高啦~
简易十六进制编辑器
目前的十六进制编辑器还不是特别好用,需要重新进行更细致的设计。现在它只支持简单数据查看和修改,不支持撤销,也不支持看数据8bit 16bit 32bit的int float数值情况。
拖拽功能
(TODO:补齐开发描述)
标签:
相关文章
-
无相关信息