type
status
date
slug
summary
tags
category
icon
password

富文本测评

prosemirror
ProseMirror ，可以说是老大哥，很多开源编辑器都是利用ProseMirror的基础上做封装的。是一个功能强大的富文本编辑器框架，它不像 TinyMCE 那样提供一个开箱即用的编辑器，而是一个可高度定制的库，专门为需要极高自定义和灵活度的开发者设计。它的核心特性是提供了一个基础的编辑框架，开发者可以根据需要自定义功能、界面和交互方式，非常适合那些有特殊需求的企业级应用。
优点:
  1. 高度可定制性
  1. 灵活的数据模型
  1. 强大的插件体系，比如支持表格、数学公式、Markdown 等功能的插件。
  1. 支持实时协作
  1. 性能优秀
  1. 适用于高级开发者
  1. 强大的社区支持
缺点:
  1. 开发门槛较高
  1. UI 自定义复杂
  1. 插件依赖较多
  1. 文档和例子不足
  1. 不适合简单需求
  1. 集成难度
总结：
ProseMirror 是一款功能强大且灵活的富文本编辑器框架，特别适合那些对编辑器有高自定义要求的应用。它的优势在于高度的灵活性、强大的插件系统以及支持实时协作等高级特性。但对于大多数需要快速开发和部署的场景，它的开发门槛较高，可能需要较强的技术背景。
Tinymce
Tinymce也是一个老牌做富文本的公司，文档和插件配置的自由度都不错，也支持自定义拓展。功能强大，可以完全作为用户的首选
免费版如下图所示：
notion image
评测一下Tinymce的优缺点：
优点:
  1. 老牌做富文本的公司，且不断保持更新和维护，值得信赖
  1. UI也做的蛮好看的（吐槽一下5.X好丑）
  1. 免费版功能强大，基本能满足日常需要（开源版本支持商用，nice）
  1. 功能强大：如导出，自定义插件，表格功能强大，文件上传，复制粘贴，数学方程等等
  1. 对非技术用户友好: 所见所得，拖动即可完成所有
  1. 支持多端，移动端友好
  1. 社区丰富，文档友好，集成简单
  1. 支持多种语言，阿拉伯这种程序员的噩梦也支持
缺点:
  1. 图片上传需要自定义
  1. 超链接不友好并且很丑
  1. UI不是很好看 - 我们领导吐槽好丑
  1. 复杂的word复制过去格式会变化，需要重新编辑
  1. 打开缓慢，需要开发者和使用者有相当的耐心
不知道怎么选的情况下，选Tinymce肯定没错，当然也不能对Tinymce有太大要求，你会失望的
CKEditor
CKEditor也是一个老牌做富文本的公司， 5.0版本无论是功能还是UI做的相当不错，毫不夸张的说，这是我见过插件最丰富的富文本了
完整版如下图所示:
评测一下CKEditor的优缺点：
优点：
  1. 老牌做富文本的公司，且不断保持更新和维护，值得信赖
  1. UI简洁美观
  1. 功能强大：100多个插件，如导出，自定义插件，表格功能强大，文件上传，复制粘贴，数学方程等等
  1. 对非技术用户友好: 所见所得，拖动即可完成所有
  1. 支持多主题配置
  1. 支持多端，移动端友好
  1. 支持多人协作
  1. 支持多种语言，阿拉伯这种程序员的噩梦也支持
缺点：
  1. 价格比较贵，免费版功能太少，可能不会满足日常使用
  1. API太多，文档对于国内不是很友好, 开发成本高
  1. V38.0.0起，免费版会显示“Powered by CKEditor”logo(这也是我司最后放弃使用CKEditor的原因之一)
如下：
notion image
基于CKEditor的优缺点，推荐复杂文档编辑及格式化的业务使用 白嫖党不推荐，适合人民币玩家
Tiptap
Tiptap是一个模块化的编辑器, 官方解释是tipTap是一个无头编辑器，无头特征决定了完全自由。自由扩展，自由定义。
它基于Prosemirror，完全可扩展且无渲染。可以轻松地将自定义外观、样式、位置等等
灵活的API，不仅可以让你进行天马行空的布局，各种事件也可以让你用到飞起。作为一个后起之秀，迅速占领市场，赢得了大量客户的好评。真心推荐大家去使用一下！
下面评测一下Tiptap富文本
优点：
  1. 高度可定制的UX
  1. 功能强大，插件丰富
  1. 可快速搭建，集成简单
  1. 和element适配度高，使用element-ui不要太爽
  1. 支持多人协作
缺点:
  1. 自由度太高，配置较复杂，需要对API有一定的了解
  1. 不支持markdown
经查阅资料，tiptap插件支持markdown格式，感谢 李里_lexy 和 imber的指正
想要多人协作的，不要考虑了：用它，用它，用它！
Quill
我司最后决定使用的一款富文本。配置简单，UI也还不错。中文文档丰富，一天的时间就可以集成到项目中。
评测一下Quill的优缺点
优点:
  1. UI还可以（虽说排版看起来有点乱）
  1. API和文档简单，一天的时间就可以集成到项目中
  1. 支持word的复制，粘贴操作（加分项）
  1. 持续更新，从发布到至今，已13年之久，不用担心不维护的问题
缺点：
  1. 对图片非常不友好，不支持图片拖拽
  1. 不支持表格
  1. 不支持html与界面的切换（在文档中统一替换很困难，需要技术人员配合）
  1. 在v-if中显示文本到编辑文本切换后，会无法输入文本，官方bug且没有被修复
全局改样式的时候，从控制台中取一下html代码，然后全局替换一下忍忍也就算了。随着图片上传后，文档排版越来越麻烦，真的不能忍了。只能宣布这个富文本的倒计时了！
适合对图片没有太多需求，并且对文档没有太大格式需求的公司
个人开发蛮推荐的
wangEditor
国产之光，个人能做成这个样子，我还是由衷的佩服的。
notion image
有兴趣的掘友们可以看下为什么都说富文本编辑器是天坑?。觉得自己还可以的掘友可以试着做做下面这两个小功能？
  1. 输入一个Hello， world！
  1. Hello加粗，llo斜体，world加粗，ld下划线
  1. 选中hello，取消选择，复制，粘贴，全选，删除
  1. 兼容主流浏览器
  1. 看一下标签至少符合规范(加粗斜体不能嵌套，p标签不能包块元素，是否有空标签...)
不要小看这个小功能，我敢打赌，95%的程序员至少一周的时间或者压根做不出来
赌一包辣条，立贴为证
好了，回到正题。我们评测一下wangEditor富文本
优点:
  1. 简单易用，可以快速集成
  1. 中文文档友好
  1. 支持图片和表格拖拽
  1. 社区友好，可以在github提交意见和反馈
  1. 多语言支持
缺点:
  1. 个人开源，相对专门做富文本的公司，相对配置型和丰富性不足
  1. 移动端不适配，Android下有严重bug，可能会影响使用
  1. 暂停维护了
首先向wangEditor开源作者双越老师表示敬意，因为开源想盈利太不容易了，基本都是为爱发电
不考虑移动端的，并且不介意暂停维护的可以使用
否则直接pass吧，用Jodit或者wangEditor-next替代吧
wangEditor-next
wangEditor-next的作者cycleccc在简介中这样写道：
wangeditor 因作者个人原因短期不再维护，wangEditor-next为fork版本,将在尽量不 Breaking change 的前提下继续维护。
此外，wangEditor-next也不再是个人单打独斗了，开始多人团队协作。最近几个月更新也很频繁，近3000次commit也能看出该团队的活跃度和持续产出，这种高频次的更新不仅反映了团队对用户反馈的响应速度，确保项目能够持续迭代并满足用户需求。
notion image
期待wangEditor-next能够在开源和盈利中找到平衡点，期待国人的产品能够获得广泛认可，为用户提供优质的体验。
Jodit
免费版功能如下:
notion image
  1. 风格和wangEditor类似，但功能要比wangEditor强大的多。
  1. 项目持续维护中，不用担心跑路的问题
  1. 支持图片和表格拖拽
  1. 支持word复制和粘贴
  1. 支持打印
  1. 适配移动端，可预览
  1. 支持多语言
白嫖党的福音
大招:收费版来了
在原有的基础上又增加了以下实用的功能
  1. 支持文档翻译和谷歌地图
  1. 支持预览和导出pdf
  1. 支持自定义button
  1. 支持插入iframe
  1. 支持恢复功能（不是撤销，是真的回档）
  1. 支持查找和替换（很nice的功能）
一次性付费99$（一个项目），399$（无限项目）即可解锁，我觉得超值
相比于wangEditor，我更推荐Jodit。无论是免费版，还是付费版，都值得拥有和尝试
Editor.js
Editor也是一个模块化编辑器。与Tiptap有很多相似之处，如模块化设计，可拓展性等等。这里不详细展开了，主要说一下两个编辑器的不同点:
  1. Editor.js
默认生成 JSON 格式的数据，便于解析和存储。适合保存结构化的数据，如文档管理等等等。
Tiptap 功能更强大，适合需要精细控制的富文本编辑器应用，尤其适合需要所见即所得体验的场景，如博客编辑器等等
  1. Tiptap的社区及文档更友好，非常适合 Vue 或 React 项目集成，更适合初次开发者
  1. Editor功能较少，可能不满足使用
  1. Editorbug比较多
，虽然已经修复了好多，但建议还是慎选
Editor默认使用JSON格式的数据，更易于展示和分析，除非有强烈需求，否则慎选
Slate
引用一下原文:
Slate是一个 完全 可定制的富文本编辑器框架。
Slate 让你构建像 Medium, Dropbox Paper或者是 Google Docs(它们正成为web应用的标杆)这样丰富，直观的编辑器，而不会让你在代码实现上深陷复杂度的泥潭。
文档介绍的很酷，但目前是beta版本，且仍没有计划发布正式版。我没有用过，不做过多的评价，有兴趣的可以自己去体验一下
开源项目，没有大公司的支持，完全是自愿奉献。30k的star用户默默的支持，期待早日发布
很酷的架构设计，推荐大家去体验一下，期待Slate的早日发布
medium-editor
notion image
一款轻量级的编辑器，压缩后约为28KB, 除了工具栏可以显示在文本上方，支持内联编辑外，我没有找到其他的优点。4年没有更新, 插件拓展非常不友好。对不起这16K的star
如果你喜欢这种编辑方式，还可以体验一下。除此外，直接Pass
Squire
notion image
又是一款轻量级的编辑器，压缩完才11.5kb，相对于其它的富文本来说是非常的小了，推荐功能不复杂的场景使用
轻量级的编辑器，相较于medium-editor更符合用户习惯，推荐功能不复杂的场景使用
UEditor
notion image
看到上面这个图片，估计很多用户直接就断绝了使用的想法吧。确实，UI设计的真不好看，不符合当今的审美。可是在小10年前，用百度UEditor的比比皆是，只能说此一时彼一时。
我们评测一下UEditor富文本
优点:
  1. 发布之初，功能强大，但是放在现在，已经有点弱了
  1. 支持从word复制粘贴
  1. 中文文档友好
缺点:
  1. 无力吐槽的UI
  1. 官方已经不维护了，gg
  1. 不支持图片和表格拖拽
  1. ...
不吐槽了，直接用省略号吧。祭奠我的青春
久远的富文本，官方已经不维护了，不推荐使用
UEditor Plus
UEditor Plus 是基于 UEditor 二次开发的富文本编辑器
notion image
让人诟病的UI风格终于焕新了，还算在我的审美点上了，简单评测一下
优点：
  1. UI风格焕新还是蛮清新的(功能平铺还是感觉有点乱，太占空间了)
  1. 支持图片拖拽
  1. 表格功能强大（虽然有些功能我不太会用）
  1. 兼容现有UEditor
缺点：
  1. 作为开发者，很多功能都不会用，更别提普通用户了，估计一脸懵
  1. 为了功能而功能，忽视了用户体验
  1. 更新迭代比较慢，社区不友好，不是很关心用户的反馈
试用了1天，总给我不踏实的感觉，担心某一天又不维护了
编辑器的功能体验不是很好，有些功能是为了功能而功能，真心希望提升一下用户体验
Summernote
notion image
一款韩国人做的开源编辑器。基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项，乍一看，页面挺清新简洁的。但使用下来非常让人之气愤。用户提的bug和优化项目完全不理，格式化也是做的很差劲。搞不懂11k的star是怎么出来的
不推荐用。除非你喜欢用hook去擦屁股
Redactor
优点：
  1. 简洁优雅的界面：Redactor 提供了一个简洁的 UI，适合那些不需要复杂功能，只希望提供基本富文本编辑功能的应用。
  1. 功能够用：支持常见的文本格式化、图片上传、表格等，满足大部分需求。
  1. 良好的插件支持：虽然是商业版，但插件体系和扩展性不错，能支持多种自定义功能。
  1. 响应式设计：界面在移动端表现良好，适合多设备使用。
缺点：
  1. 纯商业收费：不像 TinyMCE 有免费版，Redactor 完全是收费的，这可能会让一些预算有限的团队却步。
  1. 功能有限：相比更强大的编辑器，Redactor 在高级功能（如协作、复杂表格等）上可能略显单薄。
  1. 不适合大规模自定义：对开发者来说，它的定制性不如一些开源编辑器（比如 ProseMirror）灵活，扩展会受到一定限制。
  1. 社区支持一般：因为是商业产品，社区活跃度没有开源产品那么高，遇到问题可能依赖官方支持。
md-editor-v3
轻量级、Markdown 专用：非常适合需要 Markdown 编辑的应用，操作简单，轻便无负担。
优点：
  1. Vue3 兼容：专门为 Vue3 设计，完美适配现代的前端框架，如果你是 Vue 用户，集成起来特别顺手。
  1. 开源免费：完全开源，免费使用，支持修改和自定义，适合开发者进行二次开发。
  1. 支持实时预览：你写的 Markdown 会立刻转化为渲染后的内容，实时反馈，十分方便。
缺点：
  1. 功能局限：它主要针对 Markdown 编辑，富文本格式化的功能相对较少，不适合需要 WYSIWYG 编辑的场景。
  1. 依赖 Vue3：如果你的项目使用的是其他前端框架（比如 React 或 Angular），可能不太适用，集成起来会有些麻烦。
  1. 界面简陋：虽然足够轻便，但它的界面和交互设计可能对一些用户来说显得太简洁，缺乏一些现代感。
  1. 适用场景较窄：如果你需要的是功能全面的富文本编辑器，md-editor-v3 可能不是最好的选择。

简评

强烈推荐
Tinymce: 不知道怎么去选的时候，就用Tinymce！不求有功，但求无过
CKEditor: 文档格式化内容众多，追求使用效率，并且土豪公司或者人民币玩家就用它
Tiptap: 喜欢diy样式的，追求美观和别具一格的开发者首选
Jodit: 一次性付款，你值得拥有
比较推荐
Quill: 集成简单，小项目够用，大项目不推荐
wangEditor: 国人之光
wangEditor-next: wangEditor的升级版，持续迭代，持续为您服务
Editor: 存储，解析JSON数据的首选，其他慎选
Slate: 很棒的架构设计，期待早上发布
UEditor Plus: 基于 UEditor 二次开发的富文本编辑器，UI和功能都做了升级，初步体验还是蛮不错的，个人建议还是要慎用
prosemirror:最牛的项目，但是文档不全，需要很高的经验
不推荐
UEditor: 百度的烂尾项目，不够打了
Squire: 轻量级编辑器，格式文本还是可以的
Summernote: 韩国佬开发的项目，大爷级别的，反人类，还不搭理你
medium-editor 除了在文档上方显示，找不到其他的优点
功能支持表展示
ㅤ
公式
录音
文件上传
AI助手
表情
表格
协作编辑
Markdown 文本
自定义
移动端
付费版本
ProseMirror
✅
No
✅
No
✅
✅
✅
✅
✅
✅
No
TinyMCE
✅
No
✅
No
✅
✅
✅
No
✅
✅
✅
CKEditor
✅
No
✅
✅
✅
✅
✅
✅
✅
✅
✅
Tiptap
No
No
✅
No
✅
✅
✅
✅
✅
✅
No
Quill
No
No
No
No
✅
No
No
No
✅
✅
No
wangEditor
No
No
✅
No
✅
No
No
No
No
✅
No
wangEditor-next
No
No
✅
No
✅
No
No
No
✅
✅
No
Jodit
No
No
✅
No
✅
No
No
No
✅
✅
No
Editor.js
No
No
No
No
No
No
✅
✅
✅
✅
No
Slate
No
No
✅
No
No
✅
✅
✅
✅
✅
No
medium-editor
No
No
No
No
No
No
No
No
No
✅
No
Squire
No
No
No
No
No
No
No
No
No
✅
No
UEditor
No
No
✅
No
✅
No
No
No
✅
✅
No
UEditor Plus
No
No
✅
No
✅
✅
No
No
✅
✅
No
Summernote
No
No
✅
No
✅
✅
No
No
✅
✅
No
Redactor
No
No
✅
No
✅
✅
No
No
✅
✅
✅
md-editor-v3
✅
No
No
No
✅
✅
No
✅
✅
✅
No
参考链接：https://juejin.cn/post/7434373084747333658
相关文章
如何使用notion写文章
示例文章
EMPTY-ARTICLE
空白文章
空白文章
MathJAX让你的网站渲染数学公式
Loading...
Leon
Leon
洞穴中的囚徒只能看到墙上的影子，而影子并不是现实的全部。只有走出洞穴，才能看到真正的世界