• 请不要在回答技术问题时复制粘贴 AI 生成的内容
redtech
V2EX  ›  程序员

2022 前端富文本编辑器该怎么选

  •  4
     
  •   redtech ·
    byoungd · Feb 14, 2022 · 14333 views
    This topic created in 1727 days ago, the information mentioned may be changed or developed.

    目前市面上比较知名的编辑器如:

    • TinyMCE - 富文本编辑器里的 Word ,功能丰富
    • tiptap - 多人在线实时协同编辑
    • CKEditor 5 - 开源免费可商用,行内编辑
    • Quill - 易扩展、轻量级二开、代码高亮好用
    • Froala - 插件丰富,UI 友好,编辑器里的苹果
    • summernote - 恰到好处的轻,可直接粘贴图片
    • slate - 模型设计的很精巧
    • etherpad-lite - 国内很多在线文档的参照

    以上编辑器,TinyMCE 和 CK 对表格的支持还算不错

    其他的几个在表格方面就比较弱了

    鄙人也参与开发了一个(项目的创始人是安扎东,我仅仅是凑数的) 功能丰富 但是由于是基于 contenteditable 部分功能的实现不完善 暂时还上不了台面 欢迎参与共建

    github.com/yanmao-cc/am-editor

    商业项目依然推荐以上几个老牌知名的 个人项目倒是可以试试 am

    Supplement 1  ·  Feb 14, 2022

    am-editor的优势:

    • 功能齐全,够用好用

    • 表格功能在市面上做的应该是最好的之一 后续还会在这方面投入更多精力进行优化

    • 支持低成本实现多人协作

    Supplement 2  ·  Feb 14, 2022
    夹带一些私货

    非常欢迎关注我的 GitHub🐱: github.com/byoungd

    看我怎么从一个门外汉一路坑蒙拐骗水到了一个正儿八经的开源组织管理者的 😁
    88 replies  •  2022-06-14 23:57:19 +08:00
    redtech
    redtech
    OP
    Feb 14, 2022
    1
    这个项目暂时还到不了推行的阶段 因为 toolbar 的实现绑定了 antd 目前正在去 以使整个项目达到一个更轻巧的状态

    由于本人在这方面也不是砖家 欢迎大佬来帮忙打怪升级啊
    kimown
    kimown
    Feb 14, 2022❤️1
    2
    draftjs
    iamqiwei
    iamqiwei
    Feb 14, 2022❤️1
    3
    客户说要用秀米,你还是得用 ueditor ,秀米什么时候倒闭
    stkstkss
    stkstkss
    Feb 14, 2022❤️1
    5
    @iamqiwei 哈哈哈
    forsigner
    forsigner
    Feb 14, 2022❤️1
    6
    Slate.js 可玩性高
    hfpp2012
    hfpp2012
    Feb 14, 2022❤️2
    7
    除了 TinyMCE 都是是垃圾
    redtech
    redtech
    OP
    Feb 14, 2022
    8
    @hfpp2012 这个评价太武断了啊
    IvanLi127
    IvanLi127
    Feb 14, 2022 via Android❤️1
    9
    用过 1,3,4 ,还可以。个人感觉 1 比 3 好,3 比 4 好。
    redtech
    redtech
    OP
    Feb 14, 2022
    10
    @IvanLi127 quill 的表格支持很弱 这点就让我在选择时 pass 掉了
    rabbbit
    rabbbit
    Feb 14, 2022❤️1
    11
    TinyMCE
    redtech
    redtech
    OP
    Feb 14, 2022
    12
    @K120 am-editor 在这个 list 里是否能有姓名?
    SingeeKing
    SingeeKing
    Feb 14, 2022❤️1
    13
    所以比 TinyMCE 的话优势在哪里呢?有个对比吗
    redtech
    redtech
    OP
    Feb 14, 2022
    14
    @SingeeKing 支持 ot 进行协同 主要是可以低成本的实现多人协作 以及表格的功能对标金山文档(借鉴) 操作起来简单且强大
    pigspy
    pigspy
    Feb 14, 2022❤️1
    15
    有没有基于 slate 封装的比较好的编辑器啊
    redtech
    redtech
    OP
    Feb 14, 2022
    16
    @pigspy slate 可玩性高 但是真的玩起来的项目都内部使用了 不愿意开源的
    redtech
    redtech
    OP
    Feb 14, 2022
    17
    @K120 提了 pr 了
    andrew2558
    andrew2558
    Feb 14, 2022❤️1
    18
    如果是 react ,可以考虑一下 plate ,是基于 slate 的,不过好像主要是一个人在维护,功能还不太完善。表格也还很简单
    andrew2558
    andrew2558
    Feb 14, 2022❤️1
    19
    @pigspy plate 是基于 slate 的,不过只能在 react 上使用
    zzlatan
    zzlatan
    Feb 14, 2022❤️1
    20
    富文本编辑器里涉及到公式编辑的哪个好用一些?
    charlie21
    charlie21
    Feb 14, 2022❤️1
    21
    https://www.primefaces.org/primereact/editor/ react 的,UI 套装里自带 editor 了
    andrew2558
    andrew2558
    Feb 14, 2022❤️1
    22
    FallenMax
    FallenMax
    Feb 14, 2022❤️1
    23
    如果要在中文环境下用,选框架前先在 repo 里搜搜 IME/CJK 相关 bug ,thank me later
    Nich0la5
    Nich0la5
    Feb 14, 2022
    24
    借楼问一下,现在的代码编辑器库哪个好一点,提供简单的格式括号补全,代码高亮,事件监听的基础上尽量好看
    Jafee
    Jafee
    Feb 14, 2022❤️1
    25
    知乎那个编辑器是真好用,可惜没有开源。
    MarquesMa
    MarquesMa
    Feb 14, 2022❤️1
    26
    你要是就要一个编辑器放在那里,不需要什么后续功能,哪个都行。

    要是估计后续乱七八糟定制需求会很多的话,建议还是 Slate 这种,不然天天跟编辑器搏斗高血压都上来了。
    MarquesMa
    MarquesMa
    Feb 14, 2022❤️1
    27
    @redtech 然后 Slate 协同,可以看一下 Y.js ,有 slate 的 binding ,是基于 CRDT 的。
    redtech
    redtech
    OP
    Feb 14, 2022
    28
    @iamqiwei 国内的场景比较特殊啊 还有公众号 小程序的需求就更需要定制化的方案了

    @Jafee 知乎之前也是基于 draft 吧 现在是自研?
    redtech
    redtech
    OP
    Feb 14, 2022
    29
    @andrew2558 plate 在表格方面的功能是令人遗憾的 目前也没有人积极去做表格的功能 抛开表格的需求 还是挺香的
    redtech
    redtech
    OP
    Feb 14, 2022
    30
    @charlie21 primereact - Editor is rich text editor component based on Quill. 基于 quill
    timpaik
    timpaik
    Feb 14, 2022 via Android❤️1
    31
    手机上打开好卡啊....
    redtech
    redtech
    OP
    Feb 14, 2022
    32
    @timpaik 富文本编辑器的使用场景目前的重点依然是 PC 端 mobile 端的优化空间还很大
    redtech
    redtech
    OP
    Feb 14, 2022
    33
    @MarquesMa 如果对表格功能没有比较重的需求 比如拖拽设置宽高 合并单元格等操作 作为我本人来说 tiptap 和 slate 是首选
    Mjhhh
    Mjhhh
    Feb 14, 2022❤️1
    34
    目前支持复制粘贴本地 word 图文的是不是只有 CKEditor 5 ?
    AlisonYang
    AlisonYang
    Feb 14, 2022❤️1
    35
    诶, 想参与你这个开源项目, 能聊聊吗?
    redtech
    redtech
    OP
    Feb 14, 2022
    36
    @SingeeKing 当然 am 也支持导入 markdown 后续也许会在 md 方面做一些加强
    @AlisonYang 你可以先 fork 项目参与完善 然后提 pr 当然如果想要有更多的沟通可以通过微信 tg 这类的 沟通工具
    redtech
    redtech
    OP
    Feb 14, 2022
    37
    @Mjhhh 金山文档等一众在线文档在这方面已经做的不错了 word 其实是需要将 openxml 与 html 这一套东西进行映射 我已经实现了一个简单的 但是目前还不能开源
    proger
    proger
    Feb 14, 2022❤️1
    38
    借楼,想问一下移动端上比较不错的编辑器有吗? 不用非常丰富的功能要求,最基本的编辑器 加粗 /斜体 /图片这种就行
    Rwing
    Rwing
    Feb 14, 2022❤️1
    39
    我觉得富文本编辑器最重要的一个特质应该是,面向非专业人员易用,毕竟最多的使用用户是“编辑、客服、商品信息运维人员”等等
    fernandoxu
    fernandoxu
    Feb 14, 2022
    40
    draftjs 还是很不错的
    wanguorui123
    wanguorui123
    Feb 14, 2022
    41
    目前编辑器最好的还是石墨笔记的但是不开源商业版
    redtech
    redtech
    OP
    Feb 14, 2022
    42
    @fernandoxu 我的看法是 简单好用够用 即可 至于模型已经多人协作的事情 大厂都会自研的
    @Rwing 依然是表格功能较弱
    redtech
    redtech
    OP
    Feb 14, 2022
    43
    @wanguorui123 那是他的命根子 开源就准备 gg
    GrapeCityChina
    GrapeCityChina
    Feb 14, 2022
    44
    要是有资金的话,建议使用商业的 SpreadJS ,体验一下就知道了: https://www.grapecity.com.cn/developer/spreadjs
    redtech
    redtech
    OP
    Feb 14, 2022
    45
    @GrapeCityChina 普通文档中的表格和电子表格的需求是有区别的 关注过你们 在电子表格这块做的的确蛮好的
    abccccabc
    abccccabc
    Feb 14, 2022
    46
    @Mjhhh 如果不是图文一起复制的话,ueditor 已经实现了。至少我在用这个功能。
    redtech
    redtech
    OP
    Feb 14, 2022
    47
    @abccccabc 图片复制的思路粗糙点的实现可以很简单 直接转 base64
    leelz
    leelz
    Feb 14, 2022
    48
    redtech
    redtech
    OP
    Feb 14, 2022
    49
    @leelz V5 版本的开发进度太慢了
    redtech
    redtech
    OP
    Feb 14, 2022
    50
    @leelz 国内还有一个 textBus 其实也蛮好的
    zy5a59
    zy5a59
    PRO
    Feb 14, 2022
    51
    kilasuelika
    kilasuelika
    Feb 15, 2022 via Android
    52
    suneditor ,以前用过,相比其它的特长是支持数学公式。
    demonzoo
    demonzoo
    Feb 15, 2022
    53
    没人提 tiptap ?
    Mjhhh
    Mjhhh
    Feb 15, 2022
    54
    @abccccabc 就是 Ctrl+A ,Ctrl+C 把整个 Word 图片文字一键复制粘贴到富文本,目前我只知道 CKEditor 5 有支持。
    redtech
    redtech
    OP
    Feb 15, 2022
    55
    @demonzoo 第二条就有写呀
    redtech
    redtech
    OP
    Feb 15, 2022
    56
    @kilasuelika 我们开发的这个也是支持公式的呢 🎉
    redtech
    redtech
    OP
    Feb 15, 2022
    57
    @zy5a59 Vditor 已经不是被积极维护的仓库了
    redtech
    redtech
    OP
    Feb 15, 2022
    58
    @Mjhhh 从国内的生态来看 最大程度兼容 word/wps 会是个比较吸引人的需求吧?
    ae86
    ae86
    Feb 15, 2022❤️1
    59
    https://prosemirror.net/

    没人说这个?我之前挑编辑器 选择了这个
    redtech
    redtech
    OP
    Feb 15, 2022
    60
    @ae86 tiptap 是基于这个封装的 pm 更偏向于编辑器框架 不是开箱即用的 故没有写
    badtaste
    badtaste
    Feb 15, 2022❤️1
    61
    正在做基于 Slate 开发的工作,视图层用 slate-angular ,原本是用 Quill 的,后面需求来了发现定制起来很麻烦,调研一番,就改用 Slate 了,不得不说 Slate 的设计真的很棒
    Chingim
    Chingim
    Feb 15, 2022❤️1
    62
    想了解下富文本编辑器, 哪个项目的源码 /设计比较优雅可以推荐下吗
    redtech
    redtech
    OP
    Feb 15, 2022
    63
    @Chingim 问就是 slate 啊 😄
    devwolf
    devwolf
    Feb 15, 2022
    64
    问一下熟悉 TinyMCE 老哥们,是否 tinymce 可以实现 am-editor 里的大纲 outline 功能呢?

    刚好我这边年初也在调研当前项目所用 braft-editor 的上位替代,开发人员这边顺着"支持 react + github 高星递减"一路筛选下来决定用 tingymce-react ,结果产品那边找到 am-editor ,并希望实现里面的大纲功能
    https://editor.aomao.com/plugin/plugin-heading#outline

    目前就比较头大……百度初步搜了一下,别的富文本好像也就 quill 有,但也是博客里手搓的 vue 版
    redtech
    redtech
    OP
    Feb 15, 2022
    65
    @devwolf 可以实现 toc 功能 tinyMce 是不是自带插件呢
    devwolf
    devwolf
    Feb 15, 2022
    66
    @redtech 对,tinymce 里有个 toc 生成目录,但是无法实现编辑时的锚点跳转,就是和 am-editor 版 outline 实现有差异。

    实在不行就顺着产品用 am-editor 了……但就是感觉开发这边白调研了 orz
    kilasuelika
    kilasuelika
    Feb 15, 2022 via Android
    67
    @redtech 看了一下,你们这个功能比 suneditor 丰富一些,以后试一试
    redtech
    redtech
    OP
    Feb 15, 2022❤️1
    68
    @devwolf tinymce 是基于 iframe 的 所以自己实现起来稍微有点麻烦 我们基于 tiny 开发过类似的功能
    kilasuelika
    kilasuelika
    Feb 15, 2022 via Android
    69
    @redtech 这个可不可以在纯 js 的环境中用呢。
    有时候只需要写个简单的 html 网页,如果还要去弄 npm 那些感觉太麻烦了。
    demonzoo
    demonzoo
    Feb 15, 2022
    70
    @demonzoo 第二条就有写呀
    ==============
    @redtech 看漏了,不好意思 🐶
    BlackJac95
    BlackJac95
    Feb 15, 2022
    71
    你们的 demo 对新手或者不熟悉前端的后端很不友好[捂脸]
    redtech
    redtech
    OP
    Feb 15, 2022
    72
    @BlackJac95 嗯 文档目前过于简陋 会尽快简化上手难度
    redtech
    redtech
    OP
    Feb 15, 2022
    73
    @kilasuelika 后续或许会提供
    Mjhhh
    Mjhhh
    Feb 15, 2022
    74
    @redtech 目前我所知道的(至少我所在的公司是这样),有不少人喜欢在 word\wps 编辑文章,然后再复制到网页的富文本进行发布,CKEditor 5 兼容样式与图文的特性,应该是最适合的
    redtech
    redtech
    OP
    Feb 15, 2022
    75
    @Mjhhh 有这种需求 很多运营就是这么做的
    AlisonYang
    AlisonYang
    Feb 15, 2022
    76
    加个 V 聊一下 YJ_NeverFall ,想参与开发是从 bugfix 做起吗?
    zalss
    zalss
    Feb 15, 2022
    77
    @Chingim pm ckeditor5 都可以 模型->转换器->视图
    redtech
    redtech
    OP
    Feb 15, 2022
    78
    @AlisonYang 不一定是 bugfix 文档的完善等都是可以的
    4424l
    4424l
    Feb 15, 2022 via Android
    79
    markdown 加模板方便好用
    marsyu6211
    marsyu6211
    Feb 16, 2022
    80
    @iamqiwei 不能太赞同了,所有功能写在一个文件,3w 行代码看哭了
    abccccabc
    abccccabc
    Feb 17, 2022
    81
    @Mjhhh 你有配置过 ckeditor5 实现从 word 复制文本+图片成功吗?可否共享一份?我一直想做这个功能,无耐一个做后端的,实现一个这样的功能实在是力不从心。以前准备在 fckeditor2 中实现,结果实现了一个乌龙。后来就再也没有想过图文复制 word 的功能了。
    redtech
    redtech
    OP
    Feb 17, 2022
    82
    @abccccabc CK5 应该是由一个商业的插件来支持这个功能的
    Mjhhh
    Mjhhh
    Feb 18, 2022
    83
    插件是免费的,要把文件拖拽上传功能给配置好,就能图文一起复制粘贴了
    https://ckeditor.com/docs/ckeditor4/latest/examples/fileupload.html
    链接: https://pan.baidu.com/s/1qT0aD0OO-LDImiAjtgN-AA 提取码: 55kr 复制这段内容后打开百度网盘手机 App ,操作更方便哦
    Mjhhh
    Mjhhh
    Feb 18, 2022
    84
    @abccccabc 看楼上
    abccccabc
    abccccabc
    Feb 18, 2022
    85
    @Mjhhh 多谢
    wdssmq
    wdssmq
    Feb 27, 2022
    86
    https://gitee.com/iceui/iceEditor

    帮别人安利一发。。
    redtech
    redtech
    OP
    Feb 28, 2022
    87
    @wdssmq 像是 layui 的感觉 作者是同一批人吗?
    bojue
    bojue
    Jun 14, 2022
    88
    @hfpp2012 你用过几个
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2102 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 131ms · UTC 02:43 · PVG 10:43 · LAX 18:43 · JFK 21:43
    ♥ Do have faith in what you're doing.