【效率】几个免费的富文本编辑器,这不完胜付费?

所以今天给大家分享几款我用过的、觉得值得一用的、开源免费 的富文本编辑器,甚至可以说是完胜国外的付费编辑器(付费的自己还不方便修改和定制)。

富文本编辑器推荐

editor.md

GitHub:https://github.com/pandao/editor.md

Star 数:12k

这是目前我个人最看好的国内的富文本编辑器,只学过 HTML、CSS、JS 三件套的同学也能使用。支持 Markdown 语法、代码块、科学公式、流程图等等,有非常多的自定义配置,兼容 IE 8+ 浏览器,基本上能满足写作网站的需求。

界面也很优雅,如图:

da16eff6c84c02c6e04c9b955be0d7bb.png

但美中不足的是,Editor.md 目前不支持将 HTML 解析为 Markdown,有这方面需求的朋友要注意下。

quill

GitHub:https://github.com/quilljs/quill/

Star 数:32.2k

目前面试鸭网站选用的就是 quill,作为富文本编辑器,它在 GitHub 上的 star 数名列前茅。

体验下来,它的优势是轻量、兼容性强、支持的插件扩展丰富,需要用到什么额外功能时再去单独引入就好了。

用法也很简单,原生 JS 就可以,界面也很精简:

dd7cd0fefe3e50af3ca1aab13e7e0f5b.png

此外,它还有适用于 Vue 和 React 的封装版本,无论你习惯用哪个前端框架,都能无差异地使用它。

Vue 版本:https://github.com/surmon-china/vue-quill-editor

React 版本:https://github.com/zenoamaro/react-quill

bytemd

GitHub:https://github.com/bytedance/bytemd

Star 数:2k

从名字就能看出来,这是字节跳动(掘金)出品的富文本编辑器,功能强大,而且支持很多掘金内置的主题,写作体验很棒:

c70f9bc8da6cadceed6dae42c2cd1a73.png

这款编辑器使用 Svelte 框架开发,支持原生、Vue、React、Svelte 框架集成,几乎适用于所有前端开发人员:

1c20ef1852ae12ca1d8ec1c6dae5b09f.png

我的编程导航网站使用的就是这个编辑器,之前它在火狐浏览器会崩溃,后来很快就修复了,给响应速度点个赞。

monaco-editor

GitHub:https://github.com/microsoft/monaco-editor

Star 数:28.6k

微软开源的代码编辑器,支持 Visual Studio 主题,可以给用户如同在本地编辑器一般敲代码的体验:

ecf1fa3e050c75914a399cd386fb9999.png

最吸引我的是,这款编辑器还支持代码 Diff 功能!如果想自己开发一个类似 GitHub 的代码差异展示界面,用它就能轻松实现了~

0dc943f2a90579b54703183f2a404a85.png

tui.editor

GitHub:https://github.com/nhn/tui.editor

Star 数:14.4k

这款富文本编辑器最吸引我的是它的界面,个人感觉看着比其他的都舒服一点。

dc8f777d89736d361aad94f77e7088cc.png

而且他是支持所见即所得的,类似 Typora 的那种编辑体验:

bbe1e0f84f2bf5ae684265743e69fb9c.png

这款编辑器也同时支持原生 JS 以及 Vue、React 的封装版本,还是很推荐的。

slate

GitHub:https://github.com/ianstormtaylor/slate

Star 数:23.8k

这个富文本编辑器有些特殊,作者对它的描述是:专注于构建富文本编辑器的完全可定制框架,可以将它理解为用于更好地造轮子的轮子。

实际体验下来,它的易用性相对不高,但是确十分灵活,如果你想做一个自己的富文本编辑器,slate 是一个不错的选择!

3ef9da3cd51c4eea3cd64be5d9a74731.png


 
 
 
 
 
 
 
 
 
 
往期精彩回顾




适合初学者入门人工智能的路线及资料下载(图文+视频)机器学习入门系列下载中国大学慕课《机器学习》(黄海广主讲)机器学习及深度学习笔记等资料打印《统计学习方法》的代码复现专辑
AI基础下载机器学习交流qq群955171419,加入微信群请扫码:

724af8c48163dca2bf202de87a0f31f0.png

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值