前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >几个免费的富文本编辑器,这不完胜付费?

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

作者头像
程序员鱼皮
发布2022-04-08 11:31:40
4.8K0
发布2022-04-08 11:31:40
举报
文章被收录于专栏:鱼皮客栈鱼皮客栈

大家好,我是鱼皮,昨天 的小伙伴问我:现在想做个写作网站,有没有好用的前端富文本编辑器组件?

这个问题真是戳我痛处了,我之前在开发编程导航、面试鸭、面试君主等网站和小程序时,就一直被富文本编辑器所困扰,尝试过许多,绝大多数都是不能满足我的需求的。要么太难看、要么太卡顿、要么是框架 / 版本不兼容(我用 React 多一点),还有更离谱的是在部分浏览器不兼容!以致于我曾经花了整整一周去调研和试错。。。

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

富文本编辑器推荐

editor.md

GitHub:https://github.com/pandao/editor.md Star 数:12k

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

界面也很优雅,如图:

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

quill

GitHub:https://github.com/quilljs/quill/ Star 数:32.2k

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

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

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

此外,它还有适用于 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

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

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

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

monaco-editor

GitHub:https://github.com/microsoft/monaco-editor Star 数:28.6k

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

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

tui.editor

GitHub:https://github.com/nhn/tui.editor Star 数:14.4k

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

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

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

slate

GitHub:https://github.com/ianstormtaylor/slate Star 数:23.8k

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-03-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员鱼皮 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 富文本编辑器推荐
    • editor.md
      • quill
        • bytemd
          • monaco-editor
            • tui.editor
              • slate
              相关产品与服务
              云开发 CloudBase
              云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档