GitHub上都有哪些优秀的前端编辑器(组图)

优采云 发布时间: 2021-07-14 18:21

  GitHub上都有哪些优秀的前端编辑器(组图)

  当我们要开发博客、社区、论坛等内容制作平台时,用户选择一款界面优雅简洁、交互流畅的文本编辑器始终是必不可少的一步。

  一个完整的前端文本编辑器需要前端工程师综合考虑设计、交互、编码、测试、组件化、模块化、可扩展性等各个方面,用心打造。合格的编辑。

  产品完成后,那些追求极致体验的前端工程师会在GitHub上开源自己精心打造的富文本编辑器。每个人都像华山论剑一样,一个个展示了自己的绝活,想要在GitHub上争夺自己的编辑一席之地。

  这两天,又有一个开源编辑器参加了比赛。这位参赛者的名字是 editor.js。下面说一下具体的功能。

  今天借此机会向您介绍 GitHub 上可用的优秀前端编辑器。

  1、editor.js

  项目地址:

  我首先要说的是 editor.js 项目,它最近进入了 GitHub Trending 列表。

  这个项目的研发团队叫做CodeX,由一群*敏*感*词*圣广西大学热爱网页开发和设计的学生组成。他们的目标是“打造一支眼中有火,有理想气质的团队”。

  把这句话和他们的logo结合起来,真的有点感觉。

  

  除了这个编辑器,团队还开源了其他几个有趣的Web项目,但是受限于今天分享的话题,所以请点击这里。有兴趣了解的同学可以去他们的官网看看,地址会一起放在后台。

  

  同时editor.js也提供了一些方便用户使用的快捷键。如果您对他们提供的快捷键不满意,可以自行自定义。

  

  总的来说,这款编辑器通过对“块”的操作,提高了大块内容的编辑效率,同时也让内容的组织看起来更加清晰规范,颇有创意。

  有人评论说这个编辑器和Notion很像,你也可以对比一下。

  2、Simditor

  项目地址:

  本项目是彩城设计团队衍生自Tower项目的前端编辑器。它被定义为“一个易于使用、所见即所得的编辑器”。

  我第一次在 Ruby China 看到这个项目时,就被他清新简洁的 UI 所吸引。试用后发现一些前端的交互效果也很不错。

  

  从上面的截图可以看出,该编辑器支持了当前主流编辑器的所有功能,在项目中使用时基本可以满足需求。

  此外,它还集成了丰富而强大的插件功能。目前支持表情、自动保存、Markdown 编辑、自动@人、荧光笔等插件。

  如果还不够,还可以自己开发。官方API提供了一套API,方便开发者定制产品。

  3、夏日笔记

  项目地址:

  这是一个基于 Bootstrap 和 jQuery 的编辑器。主要特点是安装方便、定制化程度高、后端集成速度快等,不过这些项目之前的主流开源编辑器应该都能满足。

  从我个人的审美来看,这个编辑器的UI并不是特别出众。之所以列在这个推荐列表中,主要是因为该项目的人气很高。

  高调项目的优势是相对于新项目会比较稳定,一些bug修复和浏览器兼容性支持会更好。

  

  4、wangEditor

  项目地址:

  这个项目与之前的项目不同的是,它是由国内前端工程师开发的,而不是一个团队。

  官网的中文文档比较齐全。如果你看英文文档有困难,可以试试这个项目。

  

  5、SimpleMDE

  项目地址:

  看标题应该就知道这个项目只支持Markdown编辑了。

  为什么不使用 WYSIWYG(所见即所得)编辑和 Markdown 编辑?下面引用作者在项目中的声明:

  生成 HTML 的 WYSIWYG 编辑器通常很复杂且有缺陷。 Markdown 从很多方面解决了这个问题,而且 Markdown 可以在比 HTML 更多的平台上进行原生渲染。然而,Markdown 并不是一般用户熟悉的语法,编辑时视觉上也不是很清晰。

  换句话说,对于不熟悉的用户,他们编写的语法在他们单击预览按钮之前没有什么意义。 SimpleMDE 旨在为不太熟悉或刚刚学习 Markdown 语法的非技术用户弥补这一差距。

  可以看出,这个项目是针对至少对Markdown语法有一点了解的用户。

  其实,Markdown 一开始就是为了给内容创作者提供一种更加简洁直观的文字排版方式,以改变传统 HTML 臃肿繁琐的排版方式。而且现在网上资料齐全,Markdown的入门门槛并不高。如果每个人都能推广 Markdown 的应用,对开发者和用户来说都是一件好事。

  

  今天给大家推荐的小编各有优缺点。虽然GitHub上还有其他功能更强大的编辑器,但我觉得上面的应该基本可以满足内容操作网站日常使用需求。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线