文档章节

GitHub 上的开源前端编辑器

 编程资源库
发布于 06/26 14:49
字数 1502
阅读 36
收藏 0

当我们要开发一个博客、社区、论坛等内容生产平台的时候,为用户挑选一个 UI 优雅简洁、交互丝滑顺畅的文本编辑器总是必不可少的一步。

一个完整的前端文本编辑器,要求前端工程师将设计、交互、编码、测试、组件化、模块化、扩展性等各方面问题都综合考虑到位,用心打造,方能称得上是一款合格的编辑器。

而待产品完成后,那群追求极致体验的前端工程师便会在 GitHub 上开源出自己精心打造的富文本编辑器。大家如同华山论剑一般,纷纷亮出自己的独门秘技,欲在 GitHub 上为自己的编辑器争夺一席之地。

这两天又有一款开源的编辑器参赛了,这位参赛选手的名字叫 editor.js,具体功能我们下面细聊。

今天乘此机会,跟大家介绍下 GitHub 上都有哪些优秀的前端编辑器。

1、editor.js

项目地址:http://t.cn/Eipg79A

第一个要聊的,即是最近刚冲上 GitHub Trending 榜的 editor.js 项目。

该项目的研发团队叫 CodeX ,是由俄罗斯圣光机大学一群热爱 Web 开发与设计的学生组成,他们的目标是「make a team with fire in the eyes and idealistic tempers」。

这句话结合他们的 Logo,确实有几分感觉。

除了这个编辑器之外,该团队还开源过其他几个有意思的 Web 项目,不过受限于今天的分享主题,在此按下不表。有兴趣的了解的同学可以到他们官网上去看一看,地址等下会一并放到后台。

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

总的来说,这款编辑器通过对「块」的操控,提升了对大块内容的编辑效率,也使得内容的组织看起来更加清晰与规范,还是蛮有创意的。

有人评论说这款编辑器挺像 Notion,你也可以对比看看。

2、Simditor

项目地址:http://t.cn/8s5dxnt

这个项目是彩程设计团队从 Tower 项目衍生出来的前端编辑器,定义是「一款简便易用、所见即所得的编辑器」。

初次在 Ruby China 见到这个项目时,我便被他那清新简洁的 UI 所吸引,动手尝试过后,发现一些前端交互效果做的也特别棒。

由上面截图你可以看出,这个编辑器支持了当前主流编辑器的所有功能,放到项目里面使用基本都能满足需求。

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

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

3、Summer Note

项目地址:http://t.cn/RzE2pbN

这是一款基于 Bootstrap 与 jQuery 开发的编辑器。主打简便安装、可定制程度高、后端快速集成等特性,但这几项目前主流的开源编辑器应该都能满足。

从我个人的审美来看,这款编辑器的 UI 也不算特别出众,将其列在这个推荐表中,主要是因为该项目的知名度较高。

项目知名度高有个好处,就是相对新项目会比较稳定,一些 Bug 修复和浏览器的兼容性支持做的会比较好。

4、wangEditor

项目地址:http://t.cn/R7RfuHK

这个项目跟前几个项目不同,它出自国内一名前端工程师之手,而非团队研发。

官网上面中文文档的配套相对齐全,如果你看英文文档比较吃力,那么可以尝试下这个项目。

5、SimpleMDE

项目地址:http://t.cn/Ein03mV

看标题你应该已经知道了,这个项目仅支持 Markdown 编辑。

为什么不用 WYSIWYG(所见即所得)编辑而选用 Markdown 编辑呢?这里引用下作者在项目中的一段表述:

WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing.

In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.

由此可见,这个项目面向的是至少对 Markdown 语法有一点了解的用户。

其实,Markdown 一开始被创造出来,就是为了给内容创作者提供一种更为简洁直观的文本排版方式,以改变传统 HTML 那种过于臃肿笨重的排版。并且,现在网上资料齐全,Markdown 入门门槛也并不高,如果大家能举力推崇 Markdown 的应用,对开发者和用户来说都算得上是一件大好事。

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

来源:GitHubDaily

欢迎关注我的公众号:【编程资源库】 ,关注后回复“我来自互联网”即可领取2000G视频教程

本文转载自:https://mp.weixin.qq.com/s/sjCbaMMhNFJg31l-jcd24A

粉丝 7
博文 40
码字总数 391
作品 0
南京
私信 提问
开源前端类库 KISSY 1.1.0 发布

眨眼近一年时光,KISSY 已经从一个开源编辑器的代号,演化成一个开源前端类库的名称。 愿景 KISSY 的愿景是:打造一个小巧灵活、简洁实用、使用起来让人感觉愉悦的前端 UI 类库。 源码 KISS...

鉴客
2010/08/26
533
0
前端实现markdown编辑器

最终效果如图所示 在线测试地址: https://fangyuanxiaozhan.com/demo/md2html 实现思路 第一步: 获取markdown开源库showdown showdown的Github地址: https://github.com/showdownjs/showdow...

木子昭
2018/12/05
0
0
2016 Web 开发资源工具大搜罗

 原文链接: 100+ Awesome Web Development Tools and Resources Web的迅猛发展对于开发者来说既是一件好事也是一件坏事。不断紧跟潮流学习新的技术、编程语言、适应变化听起来就很令人兴奋...

两味真火
2016/10/03
5.9K
13
Flutter资源收集(持续更新)

我是小前端一枚,最近没事研究了一下flutter,顺手做了一下有关资源的收集 Flutter资源收集,持续更新一下,有好的资源欢迎来补充 Github 基础+资料 Flutter Flutter中文网 Flutter中文网2 F...

龙荩草
05/24
0
0
代码编辑器横评:为什么 VS Code 能拔得头筹?| 程序员硬核评测

作者 | 韩骏 责编 | 郭芮 2015 年 4 月 29 日的 Build 大会上,微软发布了 Visual Studio Code 第一个预览版本。短短四年时间里,VS Code 高速成长。 根据 2019 年 2 月的 PYPL Top IDE ind...

CSDN资讯
03/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
42
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部