V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
redtech
V2EX  ›  程序员

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

  •  4
     
  •   redtech ·
    byoungd · 2022-02-14 09:38:19 +08:00 · 11634 次点击
    这是一个创建于 1031 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    github.com/yanmao-cc/am-editor

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

    第 1 条附言  ·  2022-02-14 10:59:42 +08:00

    am-editor的优势:

    • 功能齐全,够用好用

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

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

    第 2 条附言  ·  2022-02-14 17:47:34 +08:00
    夹带一些私货

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

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

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

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

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

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

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

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

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

    帮别人安利一发。。
    redtech
        87
    redtech  
    OP
       2022-02-28 09:58:25 +08:00
    @wdssmq 像是 layui 的感觉 作者是同一批人吗?
    bojue
        88
    bojue  
       2022-06-14 23:57:19 +08:00
    @hfpp2012 你用过几个
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   848 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 20:18 · PVG 04:18 · LAX 12:18 · JFK 15:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.