个性化阅读
专注于IT技术分析

别再找了,Github热门开源富文本编辑器,最实用的都在这里了

在前端开发中,你有没有为富文本编辑器而烦恼过?样式不好看,修改样式又有各种问题?功能不齐全或者功能自定义功能又有问题?……富文本编辑器是个头痛的问题。

百度去找,运气不好找到的都是使用不多,或者样式不合适各种问题。我们使用一个开源项目需要考虑三个因素,github上的star数,提交数,以及该项目的最新更新日期,毕竟我们都愿意使用一个多人使用,作者又频繁更新维护的框架,这样的框架更适合我们长期使用。

而使用框架最好先详细看下框架的Document参考文档,再开始写项目,减少出错。

这里介绍的富文本编辑器是目前github其中最热门的几个,具体用哪个你可以根据项目情况确定使用。

1、Quill

Quill展示图

Quill大概是目前最好用的富文本编辑器了,它被设计为现代化可兼容可扩展的编辑器,最重要的是它可以自由定制,相当先进!但是仍需要你仔细阅读Quill的开发文档,使用任何框架,首先阅读开发文档是个好习惯,否则会花费你很多不必要的精力和时间。Quill的主要特点如下:

1)API驱动设计。提供很多简洁的API调用,比如内容处理,格式化,时间,编辑器等;

2)自由定制内容和格式。Quill文本编辑器支持所有常用的媒体元素,支持自定义编辑器工具栏功能或样式;

3)支持定制多种模块。包括工具栏,键盘模块,历史模块定义,剪贴板模块,以及语法高亮模块;

4)跨平台;

5)使用更简单。Quill的参考文档描述相当简洁,给点耐心就可以设计一款很漂亮的富文本编辑器了。

Github地址:https://github.com/quilljs/quill

Demo地址:https://quilljs.com/

2、Draft.js React富文本编辑器

Draft.js React富文本编辑器

Draft.js是一个用于在React中构建富文本编辑器的框架,它由一个不可变的模型提供支持,并且跨浏览器的差异进行抽象。不管是希望支持一些内联文本样式,还是编写复杂的长篇文章,使用Draft.js构建也更加容易。Draft.js支持完全可定制,并且还提供构建模块,可以完全控制用户界面。Draft.js有以下特点:

1)可扩展和可定制:提供构建模块,以支持创建各种丰富的文本组合体验,从简单的文本样式到嵌入式媒体;

2)声明式富文本:Draft.js无缝地融入React应用程序中,使用熟悉的声明式API抽象出渲染、选择和输入行为的细节;

3)不可变编辑状态:Draft.js模型是使用immutable-js构建的,提供具有功能状态更新的API,使用数据持久性来扩展内存使用。

Github地址:https://github.com/facebook/draft-js

Demo地址:https://draftjs.org/

3、Slate编辑器

slate富文本编辑器

1)完全可定制;

2)支持嵌套文档模型,编辑器不会限制你编辑更复杂的文档;

3)无状态不可变的数据编辑;

4)优雅的changes,允许你简单地编写插件或自定义功能。

Github地址:https://github.com/ianstormtaylor/slate

Demo地址:https://www.slatejs.org/

4、MediumEditor

MediumEditor富文本编辑器

一个Medium.com WYSIWYG编辑器的克隆版,使用contenteditable API实现富文本编辑器解决方案。MediumEditor是使用普通javascript写的,不需要任何额外的框架。特点如下:

1)纯javascript,没有额外库支持;

2)轻量级框架,压缩后28KB左右;

3) 支持Chrome、Firefox、Safari、IE和Edge浏览器 。

Github地址:https://github.com/yabwe/medium-editor

Demo地址:https://yabwe.github.io/medium-editor/

5、Pell

Pell文本编辑器

Pell是目前最小最简单的web富文本编辑器,不带任何第三方依赖,快速开发必备。

1)支持常用的文本样式,粗体、下划线、标题、段落、引用、代码插入等;

2)支持图片插入,编辑简单的历史前进后退;

3)支持脚注、上标、字体设置等。

Github地址:https://github.com/jaredreich/pell

Demo地址:https://jaredreich.com/pell/

6、TinyMCE

TinyMCE展示图

TinyMCE是构建现代化、国际化和可访问内容创作体验的最佳选择。

1)全新UI,更好的响应,可自定义主题;

2)使用更简单的UI API,使开发更简单快捷;

3)功能齐全,如果你没有更特殊的需求,TinyMCE基本上都可以满足你的开发需求。

Github地址:https://github.com/tinymce/tinymce

Demo地址: https://www.tiny.cloud/

赞(0) 打赏
未经允许不得转载:srcmini » 别再找了,Github热门开源富文本编辑器,最实用的都在这里了
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏