在前端开发中,你有没有为Web富文本编辑器而烦恼过?样式不好看,修改样式又有各种问题?功能不齐全或者功能自定义功能又有问题?……富文本编辑器是个头痛的问题。
百度去找,运气不好找到的都是使用不多,或者样式不合适各种问题。我们使用一个开源项目需要考虑三个因素,github上的star数,提交数,以及该项目的最新更新日期,毕竟我们都愿意使用一个多人使用,作者又频繁更新维护的框架,这样的框架更适合我们长期使用。
而使用框架最好先详细看下框架的Document参考文档,再开始写项目,减少出错。
这里介绍的Web富文本编辑器是目前github其中最热门的几个,具体用哪个你可以将这些富文本编辑器比较一下,根据项目情况确定使用。
1、Quill
文章图片
Quill大概是目前最好用的Web富文本编辑器了,它被设计为现代化可兼容可扩展的编辑器,最重要的是它可以自由定制,相当先进!但是仍需要你仔细阅读Quill的开发文档,使用任何框架,首先阅读开发文档是个好习惯,否则会花费你很多不必要的精力和时间。Quill的主要特点如下:
1)API驱动设计。提供很多简洁的API调用,比如内容处理,格式化,时间,编辑器等;
2)自由定制内容和格式。Quill文本编辑器支持所有常用的媒体元素,支持自定义编辑器工具栏功能或样式;
3)支持定制多种模块。包括工具栏,键盘模块,历史模块定义,剪贴板模块,以及语法高亮模块;
4)跨平台;
5)使用更简单。Quill的参考文档描述相当简洁,给点耐心就可以设计一款很漂亮的富文本编辑器了。
如果你将其它编辑器和Quill富文本编辑器比较,你应该可以发现,Quill应该是最强大的一款了。
Github地址:https://github.com/quilljs/quill
Demo地址:https://quilljs.com/
2、Draft.js React富文本编辑器
文章图片
Draft.js是一个用于在React中构建Web富文本编辑器的框架,它由一个不可变的模型提供支持,并且跨浏览器的差异进行抽象。不管是希望支持一些内联文本样式,还是编写复杂的长篇文章,使用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编辑器
文章图片
1)完全可定制;
2)支持嵌套文档模型,编辑器不会限制你编辑更复杂的文档;
3)无状态不可变的数据编辑;
4)优雅的changes,允许你简单地编写插件或自定义功能。
Github地址:https://github.com/ianstormtaylor/slate
Demo地址:https://www.slatejs.org/
4、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 6大热门开源富文本编辑器介绍,Web开发必备!】Github地址:https://github.com/jaredreich/pell
Demo地址:https://jaredreich.com/pell/
6、TinyMCE
文章图片
TinyMCE是构建现代化、国际化和可访问内容创作体验的最佳Web富文本编辑器。
1)全新UI,更好的响应,可自定义主题;
2)使用更简单的UI API,使开发更简单快捷;
3)功能齐全,如果你没有更特殊的需求,TinyMCE基本上都可以满足你的开发需求。
Github地址:https://github.com/tinymce/tinymce
Demo地址: https://www.tiny.cloud/
以上就是Github热门开源Web富文本编辑器了,相信你会找到一款你喜欢的,将你喜欢的一款和其它富文本编辑器比较,看看是否满足的你项目需求,是否能长期使用等等。不管是大项目还是小项目,使用上面介绍的这些富文本编辑器基本足够了。其中对于小项目可以使用一些简单的,而对于大项目的开发,个人推荐使用Quill,因为它足够强大,还可以自由定制,另外Quill官方还有详细而友好的参考文档。
推荐阅读
- 开发者的最爱!不可多得简洁高大上的文本代码编辑器
- 前端从学习到开发,做到什么标准才能达到工作开发标准()
- 开发者必备!你真的懂Git吗(你知道Git的运行进制吗?)
- 精通Git开发!Git核心功能使用详解
- 深入浅出(C++初学者入门教程指南)
- Ruby编程语言快速上手[学习笔记]
- 必学构建工具(Gradle用法和开发教程完整指南)
- Android Gradle配置完整详细分析
- Java Mock测试(Mockito入门和用法详细指南)