7

觅道文档开始支持富文本编辑器

 3 years ago
source link: https://zmister.com/archives/1598.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

觅道文档开始支持富文本编辑器

2020/12/15 0 人评论 255 次阅读

MrDoc(觅道文档)是州的先生基于 Python 后端编写的开源在线文档系统。

最初,觅道文档以 Markdown 书写为核心,集成了 EditorMD 和 Vditor 两大主流 Markdown 编辑器,配合后端的文集、文档管理,图片、附件支持,以及类 GitBook 风格的前台阅读页面,得到了很多朋友的支持。

但是与用户的交流中发现,Markdown 这种书写方式在程序员圈子里面备受追捧,但是对于绝大多数人来说,相较于所见即所得的富文本编辑器,Markdown 语法还是有一定的学习成本的。

再加上 Markdown 作为 HTML 渲染的一个子集,很多网页元素没法通过原生的 Markdown 语法来实现(比如图片的大小和位置、文字颜色、文字背景等),使得其书写的文档最终呈现效果要弱于所见即所得的富文本编辑器。

随即,便把在觅道文档中集成一个富文本编辑器功能提上了日程。

目前市面上开源的富文本编辑器有很多,从古老的 UEditor、到 TinyMCE、以及 wangEditor,选择很多,最终权衡之后,还是选择了一个轻量、简洁、小巧的方案——iceEditor。

2020-12-14_204023.png

根据作者在官网的介绍:

为什么要开发 iceEditor 呢,最大的原因是为了深入学习 javascript,这要感谢 Z-Blog 和 Xiuno 的开发者,没有你们的支持我想自己也不会有今天,学习 javascript 中真是深深的把我震撼到了,越学习越感到 javascript 的强大,我认为我已经入门了,学到最后才发现我只看到了门框而已……

其它原因呢?当然有,开发这款产品也是有些其他想法,UEditor 编辑器是我最初用的,兼容性非常不错,功能十分强大,几乎比拟 Word 的,但是界面的传统以及体积的臃肿让我放弃了它,因为我在使用过程中应用到的功能并不多,在写文章时也只是最基本的排版以及上传图片,对于我自己开发的产品中(例如 cms 系统)应用它的时候,感觉速度不是很乐观,所以放弃了!

放弃了 UEditor 后,眼前一亮,发现了 wangEditor,这款编辑器十分优秀,界面非常简洁,这是我的项目应用时间最长的一款编辑器,但是这款编辑器依赖 JQ,让我十分不爽的是加载速度,页面加载完以后编辑器明显会停顿一下才会加载,我们公司的开发项目中我也推荐了他们使用 wangEditor,连公司的项目测试员都说这编辑器加载慢,都想换了它!

考虑了半天,具有代码洁癖的我想了很久,对我来说,要开发一款编辑器需要很深的技术,打开百度搜索了相关开发教程,让我学习到一个函数 execCommand,真是厉害了,虽然有些功能各个浏览器支持不同,但是基本的排版和颜色设置竟然兼容所有的浏览器,这完全满足了我的开发需求,我的想法十分简单,简洁、快速,不需要巨多杂乱的功能,这款编辑器所走的路线就是轻量、简洁、快速,不依赖任何框架,例如 JQ,不依赖任何 css 样式文件以及 font 图标文件,整个编辑器只有一个 js,这是我的想法。

因为整个编辑器只有一个 JavaScript 文件,非常的精练,使用起来也不复杂,非常方便地就可以集成到了觅道文档中。

2020-12-14_205256.png

最终,觅道文档实现了两种编辑模式(Markdown 和富文本)、三种编辑器(EditorMD、Vditor、iceEditor)的集成。

2020-12-14_204502.png

未来,觅道文档还将像业内标杆产品看齐,进一步完善系统功能和提升文档读写体验。


欢迎大家持续关注觅道文档。

GitHub:https://github.com/zmister2016/MrDoc

码云:https://gitee.com/zmister/MrDoc

示例站点:http://mrdoc.zmister.com/


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK