前言
笔者最近闲来无事给本人做了一个在线文档平台,反对白板、思维导图、文档、电子表格、PPT、流程图、Markdown 等,界面是这样的:
其实当初市面上有很多这种在线文档平台,笔者为什么要本人做一个呢,且听笔者短话长说。
最开始笔者只是想在开源白板我的项目 excalidraw 的根底上减少云端存储的性能,因为它的云端保留版是要免费的,况且加个数据库的增删改查也不是什么难事,做完当前想到本人做了一个开源的思维导图 mind-map,不如同时也反对一下它的云端存储,再之后,每次公布文章时都会应用一些 Markdown
转富文本的工具,通常也都没有存储的性能,于是又基于 markdown-nice 做了存储,到了这一步,想着反正也反对了这么多种类型的文档了,不如索性再把常见的流程图、电子表格都加上好了,于是就变成了当初的样子。
那么笔者这个文档平台比照市面上的相干产品来说有什么劣势吗,答案是齐全没有,很显然,人家公司是要靠这些产品赚钱的,无论是性能还是体验必定好的多,而我只是在一些开源我的项目的根底上减少了存储的性能而已,当然不是说开源的不行,毕竟市面上很多公司的产品也是基于开源的我的项目做的,然而集体的力量究竟是无限的,比方当初根本必备的在线合作性能笔者就做不进去,然而对于我集体来说,合作性能根本用不上,所以也无伤大雅。另外性能上我也用不上一些所谓的高级性能,能满足我的根本需要就能够了。
如果硬要说一些长处,第一个是数据保留在本人手里,不必放心一些小公司开张迁徙数据的问题;第二个是没有付费懊恼,毕竟很多产品不付费不开会员的话会限度创立的我的项目数量、有一些思维导图产品还限度节点数量,想白嫖并不容易;第三个就是不必在各个平台中切换,比方有的没有 Markdown
转富文本性能,有的没有白板性能,而我本人须要什么都能够加上,无非是性能弱一点而已。
接下来,笔者就挨个介绍一下所用到的开源我的项目。
开源我的项目介绍
以下我的项目根本分为两种类型,一种是残缺的我的项目模式,即能够间接运行的,这种笔者只有在其根底上减少一些按钮、题目输入框、提醒等 UI 组件,而后在数据变动时实时保留到数据库,再次关上时获取数据并回填即可;另一种是以库或组件的模式,这个须要本人创立我的项目进行应用,再加上第一种波及到的性能。
白板
白板笔者做了两种,一种是基于 excalidraw 做的手绘格调白板,这个我的项目是基于 React
的,性能很弱小,反对绘制矩形、圆形、箭头、线段、手写笔、文字等元素,同时有丰盛的素材可供选择,并且反对端对端加密进行协同。
能够间接克隆它的仓库以一个残缺的我的项目间接运行,另外它也提供了 React
组件的模式不便嵌入到你的 React
我的项目中,笔者不必React
,所以是间接基于它的残缺我的项目进行批改的,界面如下:
另一种白板应用的是笔者本人开源的一个小我的项目 tiny_whiteboard,其实也是参考 excalidraw
做的,因为 excalidraw
是基于 React
的,所以在 Vue
我的项目上应用不太不便,于是就想着做一个框架无关的,当然性能简陋了很多,并且因为实现形式起因,不反对绘制椭圆等曲线元素,性能受骗元素多了也会降落,不过通过笔者本人几篇文章的理论绘图应用后,还是能满足根本需要的,界面如下:
思维导图
思维导图抉择的也是笔者本人做的一个开源小我的项目 mind-map,做这个我的项目的起因是在应用百度脑图的时候发现了它是开源的 kityminder,不过其上一次更新曾经停留在了 4 年前,并且其代码的组织形式笔者不是很喜爱(不容易看懂),于是就仿照做了一个阉割版(为什么又是阉割版呢,因为笔者程度 just so so)。
性能上反对逻辑结构图、思维导图、组织结构图、目录组织图四种构造,鱼骨图笔者尝试了,但没做进去(难堪),另外反对主题设置、节点拖拽等,界面如下:
流程图
流程图也做了两种,一种是应用 bpmn-js 做的 BPMN
流程图,根本应用比较简单,然而找半天没有找到具体的文档,它的官网示例看着还不错,然而也没找到源码,最终也没有齐全实现出它的成果:
在用 bpmn-js
做完后又发现了一个更弱小的流程图框架 mxgraph,尽管当初这个我的项目曾经进行更新了,然而它的性能曾经足够弱小了,市面上很多流程图产品其实都是基于它做的,并且它提供了一个基本上很残缺的我的项目示例 grapheditor,还附带有源码,当然因为这个我的项目也比拟晚期,所以代码的组织形式不是模块化的,都是通过全局变量相互援用的,笔者尝试转成模块化,然而没有胜利,于是就在它的根底上通过 cdn
的形式引入 vue
、element-pls
、axios
库进行应用,这个我的项目是笔者破费工夫最多的一个我的项目,因为它的代码量真的很宏大,另外要批改的中央也比拟多:多语言翻译成中文、图片上传 cdn
、导出性能革新(因为示例的导出是须要配合后端代码的) 等。
Markdown
Markdown
编辑器有很多,然而笔者次要须要的是能转富文本的,所以最初在 markdown-nice 和 md 中抉择了 markdown-nice
,性能看着更多一些,这也是一个基于React
构建的我的项目,反对设置主题和代码主题,另外针对公众号和知乎做了一些小的适配,笔者这篇文章就是应用它敲进去的:
文档
文档其实就是富文本编辑器了,开源的富文本编辑器可太多了,笔者也是挑花了眼,最初在 tiny 和 ckeditor- 5 中抉择了 tiny
,具体起因遗记了,可能是它的官网更好看吧,然而怎么说呢,当初很悔恨,应该抉择ckeditor-5
,因为它的document
格调的确很合乎我的“文档”需要:
当前有工夫再改吧,tiny
的界面成果如下:
电子表格
开源的电子表格我的项目并不多,笔者抉择的是 Luckysheet,因为它的配置简略、性能齐全满足笔者的需要、界面也挺难看:
PPT
PPT
说实话能找到满足要求的开源我的项目还是挺意外的,因为常见的 PPT
我的项目都是相似 slidev、reveal.js、impress.js 这样的,而我须要的显然是像电脑自带的 PPT
软件一样能够编辑的,笔者晚期其实也做过一个这样的:
然而年久失修,而且性能比较简单,根本没啥实用价值。
这个给我意外惊喜的我的项目就是 PPTist,它是一个基于 Vue3.x
的我的项目,Office PowerPoint
常见的性能它都有,界面成果:
总结
本文给大家介绍了一些笔者在搭建集体在线文档中用到的优良的开源我的项目(疏忽笔者本人的我的项目),做的过程中也感触到了这些贡献者的自私和弱小,也感触到了本人的菜,与各位共勉。