我用这些开源项目轻松搭建了一个在线文档平台

简介: 我用这些开源项目轻松搭建了一个在线文档平台

前言


笔者最近闲来无事给自己做了一个在线文档平台,支持白板、思维导图、文档、电子表格、PPT、流程图、Markdown等,界面是这样的:


image.png


其实现在市面上有很多这种在线文档平台,笔者为什么要自己做一个呢,且听笔者短话长说。


最开始笔者只是想在开源白板项目excalidraw的基础上增加云端存储的功能,因为它的云端保存版是要收费的,况且加个数据库的增删改查也不是什么难事,做完以后想到自己做了一个开源的思维导图mind-map,不如同时也支持一下它的云端存储,再之后,每次发布文章时都会使用一些Markdown转富文本的工具,通常也都没有存储的功能,于是又基于markdown-nice做了存储,到了这一步,想着反正也支持了这么多种类型的文档了,不如索性再把常见的流程图、电子表格都加上好了,于是就变成了现在的样子


那么笔者这个文档平台对比市面上的相关产品来说有什么优势吗,答案是完全没有,很显然,人家公司是要靠这些产品赚钱的,无论是功能还是体验肯定好的多,而我只是在一些开源项目的基础上增加了存储的功能而已,当然不是说开源的不行,毕竟市面上很多公司的产品也是基于开源的项目做的,但是个人的力量终究是有限的,比如现在基本必备的在线协作功能笔者就做不出来,但是对于我个人来说,协作功能基本用不上,所以也无伤大雅。另外功能上我也用不上一些所谓的高级功能,能满足我的基本需求就可以了。


如果硬要说一些优点,第一个是数据保存在自己手里,不用担心一些小公司倒闭迁移数据的问题;第二个是没有付费烦恼,毕竟很多产品不付费不开会员的话会限制创建的项目数量、有一些思维导图产品还限制节点数量,想白嫖并不容易;第三个就是不用在各个平台中切换,比如有的没有Markdown转富文本功能,有的没有白板功能,而我自己需要什么都可以加上,无非是功能弱一点而已。


接下来,笔者就挨个介绍一下所用到的开源项目。


开源项目介绍


以下项目基本分为两种类型,一种是完整的项目形式,即可以直接运行的,这种笔者只要在其基础上增加一些按钮、标题输入框、提示等UI组件,然后在数据变化时实时保存到数据库,再次打开时获取数据并回填即可;另一种是以库或组件的形式,这个需要自己创建项目进行使用,再加上第一种涉及到的功能。


白板


白板笔者做了两种,一种是基于excalidraw做的手绘风格白板,这个项目是基于React的,功能很强大,支持绘制矩形、圆形、箭头、线段、手写笔、文字等元素,同时有丰富的素材可供选择,并且支持端对端加密进行协同。


可以直接克隆它的仓库以一个完整的项目直接运行,另外它也提供了React组件的形式方便嵌入到你的React项目中,笔者不用React,所以是直接基于它的完整项目进行修改的,界面如下:


image.png


另一种白板使用的是笔者自己开源的一个小项目tiny_whiteboard,其实也是参考excalidraw做的,因为excalidraw是基于React的,所以在Vue项目上使用不太方便,于是就想着做一个框架无关的,当然功能简陋了很多,并且因为实现方式原因,不支持绘制椭圆等曲线元素,性能上当元素多了也会下降,不过经过笔者自己几篇文章的实际绘图使用后,还是能满足基本需求的,界面如下:


image.png


思维导图


思维导图选择的也是笔者自己做的一个开源小项目mind-map,做这个项目的起因是在使用百度脑图的时候发现了它是开源的kityminder,不过其上一次更新已经停留在了4年前,并且其代码的组织方式笔者不是很喜欢(不容易看懂),于是就仿照做了一个阉割版(为什么又是阉割版呢,因为笔者水平just so so)。


功能上支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构,鱼骨图笔者尝试了,但没做出来(尴尬),另外支持主题设置、节点拖拽等,界面如下:


image.png


流程图


流程图也做了两种,一种是使用bpmn-js做的BPMN流程图,基本使用比较简单,但是找半天没有找到详细的文档,它的官方示例看着还不错,但是也没找到源码,最终也没有完全实现出它的效果:


image.png


在用bpmn-js做完后又发现了一个更强大的流程图框mxgraph,虽然现在这个项目已经停止更新了,但是它的功能已经足够强大了,市面上很多流程图产品其实都是基于它做的,并且它提供了一个基本上很完整的项目示例grapheditor还附带有源码,当然因为这个项目也比较早期,所以代码的组织方式不是模块化的,都是通过全局变量互相引用的,笔者尝试转成模块化,但是没有成功,于是就在它的基础上通过cdn的方式引入vueelement-plsaxios库进行使用,这个项目是笔者花费时间最多的一个项目,因为它的代码量真的很庞大,另外要修改的地方也比较多:多语言翻译成中文、图片上传cdn、导出功能改造(因为示例的导出是需要配合后端代码的)等。image.png



Markdown


Markdown编辑器有很多,但是笔者主要需要的是能转富文本的,所以最后在markdown-nicemd中选择了markdown-nice,功能看着更多一些,这也是一个基于React构建的项目,支持设置主题和代码主题,另外针对公众号和知乎做了一些小的适配,笔者这篇文章就是使用它敲出来的:


image.png


文档


文档其实就是富文本编辑器了,开源的富文本编辑器可太多了,笔者也是挑花了眼,最后在tinyckeditor-5中选择了tiny,具体原因忘记了,可能是它的官网更好看吧,但是怎么说呢,现在很后悔,应该选择ckeditor-5,因为它的document风格确实很符合我的“文档”需求:


image.png


以后有时间再改吧,tiny的界面效果如下:


image.png


电子表格


开源的电子表格项目并不多,笔者选择的是Luckysheet,因为它的配置简单、功能完全满足笔者的需求、界面也挺好看:


image.png


PPT


PPT说实话能找到满足要求的开源项目还是挺意外的,因为常见的PPT项目都是类似slidev、reveal.jsimpress.js这样的,而我需要的显然是像电脑自带的PPT软件一样可以编辑的,笔者早期其实也做过一个这样的:


image.png


但是年久失修,而且功能比较简单,基本没啥实用价值。


这个给我意外惊喜的项目就是PPTist,它是一个基于 Vue3.x的项目,Office PowerPoint常见的功能它都有,界面效果:


image.png


image.png


总结


本文给大家介绍了一些笔者在搭建个人在线文档中用到的优秀的开源项目(忽略笔者自己的项目),做的过程中也感受到了这些贡献者的无私和强大,也感受到了自己的菜,与各位共勉。



相关文章
|
测试技术 数据库 数据安全/隐私保护
推荐一个牛逼的开源在线文档系统,支持Markdown和富文本编辑模式!
推荐一个牛逼的开源在线文档系统,支持Markdown和富文本编辑模式!
3752 0
推荐一个牛逼的开源在线文档系统,支持Markdown和富文本编辑模式!
|
开发者
这款酷似飞书文档的工具开源了,支持私有部署!!!
这个酷似飞书文档的工具真的非常好用,体验和飞书差不多,同样支持 Markdown 语法,经常使用 Markdown 写文档的同学一定要试试了,相信你一定会喜欢上它,这个工具是我用差不多20天左右的时间开发的,而且它的前后端项目现在都已经开源了,如果你能帮我推广那我更是感激不尽。所以,如果你想有一个可以私有部署的文档工具,而且体验还特别棒的的,那就快来试试这个吧,相信它不会让你失望的。
1275 0
|
自然语言处理 API 数据安全/隐私保护
开源免费的知识库文档管理系统(合集+排名)
开源免费的知识库文档管理系统(合集+排名)
5719 0
|
小程序 Go 开发工具
其他类似GitBook的在线文档创作平台
(GitBook) 是一个使用 Git 和 Markdown 来构建书籍的现代化的文档平台工具,虽然已经很好了,但由于gitbook有时候由于网络等原因会导致访问书写草稿不是很方便,所以结合群友的实用情况,对其他的一些工具也做一推荐,这也是写这一篇的主要原因
445 0
其他类似GitBook的在线文档创作平台
|
Web App开发 前端开发 数据安全/隐私保护
|
缓存 Linux API
实战!使用Docker安装OnlyOffice
ONLYOFFICE,简单地说,就是将 Word 、Excel、PPT 3 大办公套件搬到了云端,只需要一个浏览器即可以在线使用 Office 的各种功能
6553 1
实战!使用Docker安装OnlyOffice
|
XML 开发框架 监控
HTTP和RPC区别(通俗易懂超级好)
用户只要在其之前进行二次开发就行,对于底层的 RPC 通讯等都是透明的。不过这个对于用户来说的话需要学习特定领域语言这个特性,还是有一定成本的。
HTTP和RPC区别(通俗易懂超级好)
|
UED 开发者 安全
重磅:阿里云文档开源
阿里云重磅宣布,6月7开始对阿里云文档进行开源!这一重大举措,体现了阿里云作为业界领导者海纳百川的恢弘气度、高瞻远瞩的开阔格局、和用户至上的勇敢担当。 文档开源的价值
3354 0
|
弹性计算 JavaScript 安全
云效流水线+ECS服务器,自动化部署属于自己的Web页面
本文主要介绍如何通过使用ECS服务器与npm,结合云效的流水线服务以仓库代码提交为触发方式,进行了基于Vue的Web网页部署。
云效流水线+ECS服务器,自动化部署属于自己的Web页面
|
项目管理 PHP 前端开发
推荐5款开源的协同办公软件
国内外开源的协同办公软件
17042 0

热门文章

最新文章