V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
DemonQ
V2EX  ›  程序员

准备写个富文本编辑器,各位有什么想法?

  •  1
     
  •   DemonQ · 2020-03-19 11:53:57 +08:00 · 10666 次点击
    这是一个创建于 1692 天前的主题,其中的信息可能已经有所发展或是发生改变。

    基于 slate.js 开发。想咨询下大佬们:

    1. 在富文本编辑器的开发中有些什么痛点
    2. 在富文本编辑器的使用中有什么痛点
    3. 你期望一个编辑器应该包含哪些?不仅是在使用上,还有开发中(比如说易于扩展之类)
    4. 你见过哪些复合你的预期的富文本编辑器,是不是开源的?
    第 1 条附言  ·  2020-03-19 14:19:40 +08:00
    看到都在说难的,就是因为有各种坑才希望大家列举一下,毕竟只说难解决不了问题。
    另外我是基于 slate.js 开发的,所以有很多东西时不需要考虑的。各人认为 slate 就相当于是个 jq 之于 web 的工具。我们需要二次开发才能得到想要的。
    最后,关于这个项目我已经开始了一个雏形: https://qishaoxuan.github.io/finxos/
    79 条回复    2021-05-04 16:25:52 +08:00
    wezzard
        1
    wezzard  
       2020-03-19 12:01:20 +08:00
    抽象層級複雜。排版引擎一個層級、programmtically 訪問的業務接口一個層級、用戶互動一個層級。

    控制器加上裏面的子模塊,基本上三四萬行起。
    micean
        2
    micean  
       2020-03-19 12:05:25 +08:00
    祝福楼主
    想一想我就脑壳痛的东西
    huayumo
        3
    huayumo  
       2020-03-19 12:05:58 +08:00   ❤️ 3
    Mogugugugu
        4
    Mogugugugu  
       2020-03-19 12:19:12 +08:00
    雨雀的富文本是非常棒的、供楼主参考,不开源。
    loading
        5
    loading  
       2020-03-19 12:21:55 +08:00 via Android
    建议去了解一下这有多难,一个团队都疯掉的东西。
    如果你这是指 vue.js 例子那种 markdown 就当我没说吧。
    iamdqncoder
        6
    iamdqncoder  
       2020-03-19 12:27:10 +08:00
    貌似这是个大坑
    ayase252
        7
    ayase252  
       2020-03-19 12:28:25 +08:00 via iPhone
    想起这玩意睡觉都睡不好,真的,极其容易出 bug
    jydeng
        8
    jydeng  
       2020-03-19 12:28:36 +08:00
    我也曾经想过,后来放弃了,项目上用 CKEDITOR+自制插件,满足了需求。
    mywaiting
        9
    mywaiting  
       2020-03-19 12:29:19 +08:00
    ProseMirror 了解一下
    murmur
        10
    murmur  
       2020-03-19 12:35:22 +08:00
    图表、富文本编辑器都是前端深坑,图表还可以做简单,富文本做简单就是没法用,最后还要用别人的
    nightwitch
        11
    nightwitch  
       2020-03-19 12:36:58 +08:00
    先考虑一下蒙文这种自上而下的排版以及从右到左的阿拉伯语该怎么排版。这两种是富文本的梦魇
    abcbuzhiming
        12
    abcbuzhiming  
       2020-03-19 12:37:36 +08:00   ❤️ 4
    富文本编辑器是超级大坑,名列知乎“哪些是产品经理觉得简单实际上超级难的需求”的前 5 名
    justfortest
        13
    justfortest  
       2020-03-19 12:37:56 +08:00 via Android
    曾经我业余写一个 web 聊天,自己搞消息编辑器,包括光标、复制、表情、图片、链接,真的脑壳疼,需要考虑的事情太多了,建议打消这个念头,编辑器不可能契合所有用户,基本都要自己修修改改。
    ericls
        14
    ericls  
       2020-03-19 12:41:56 +08:00 via iPhone   ❤️ 4
    首先你得 fight dom. 比如 composition state 这一类的东西 总之 dom 得和你的数据同步。

    另外就是你得设计模型 如果纯文本好说 如果有结构就比较复杂了 关键是你还是得和 dom 做同步……

    然后你得考虑一些只有渲染时候出现 但是不是数据的一部分的东西 来渲染比如语法高亮 白空 根据鼠标位置等外部数据的渲染

    然后你得考虑协同 用 CRDT 还是 OT. 你的 flow control 等等 离线模式怎么设计


    以上东西我整整花了一年
    Runningzs
        15
    Runningzs  
       2020-03-19 12:43:00 +08:00
    这个问题你应该问一下富文本编辑器大国:韩国人 (手动狗头)
    IDCFUN
        16
    IDCFUN  
       2020-03-19 12:45:10 +08:00
    求问各位大大一个编辑器有关的问题,textarea 里有一段文字,我选中中间一部分,然后点击一个按钮在选中部分前边插入<a>,后边插入</a>,这个用原生 JS 如何 实现呢?谢谢啦。
    dremy
        17
    dremy  
       2020-03-19 12:58:49 +08:00 via iPhone
    勇士,祝好运
    ericls
        18
    ericls  
       2020-03-19 13:00:22 +08:00 via iPhone
    @IDCFUN textarea 不好。用 content editable。然后就好操作了
    IDCFUN
        19
    IDCFUN  
       2020-03-19 13:16:55 +08:00
    @ericls 谢谢,我去了解一下。
    fancy111
        20
    fancy111  
       2020-03-19 13:18:42 +08:00   ❤️ 1
    既然都自行开发富文本编辑器了,就不要用第三方的任何东西。直接手写 JS,原生。我看好你
    poisedflw
        21
    poisedflw  
       2020-03-19 13:20:16 +08:00   ❤️ 1
    曾经用过 Quill.js ,Slate.js ,可以说是超级大坑,slate 在 windows 的选区中有一大堆问题。
    和 8L 一样,最终换了 ckeditor5 加一些定制化的插件,真的很香!
    zarte
        22
    zarte  
       2020-03-19 13:45:44 +08:00
    我需要个各个浏览器下生成的内容源码一样的编辑器,复制 word 内容进去也是生成一样的。
    SuperAllen
        23
    SuperAllen  
       2020-03-19 13:50:06 +08:00 via Android
    @DemonQ 想了解下楼主有写编辑器想法的心路历程
    DemonQ
        24
    DemonQ  
    OP
       2020-03-19 14:29:07 +08:00
    @zarte 这个在我以前的项目中已经支持了,而且好像也不是那么难。。。
    340244120w
        25
    340244120w  
       2020-03-19 14:29:45 +08:00 via iPhone
    参考 uditor 就知道了
    red2dog
        26
    red2dog  
       2020-03-19 14:33:39 +08:00
    超级天坑。
    wanguorui123
        27
    wanguorui123  
       2020-03-19 14:59:59 +08:00
    铁杵磨成针
    iConnect
        28
    iConnect  
       2020-03-19 15:01:02 +08:00 via Android
    浏览器兼容性可以逼疯千百回
    tsui
        29
    tsui  
       2020-03-19 15:28:10 +08:00
    选型就选了天坑 Slate,good luck
    cuixiaoyan
        30
    cuixiaoyan  
       2020-03-19 15:28:48 +08:00
    我截图之后,能直接粘贴到富文本编辑器里可以否。
    DemonQ
        31
    DemonQ  
    OP
       2020-03-19 15:33:27 +08:00
    @cuixiaoyan 这个问题就像是在问 vue 怎么实现图片上传一样。。。
    ipwx
        32
    ipwx  
       2020-03-19 15:33:55 +08:00
    所见即所得的 Markdown 编辑器,包含公式等功能。参考 Typora。

    如果你做出来了这么一款 HTML5 控件,提供 vue.js / ReactJS 接口,你就是开源大佬。
    gaigechunfeng
        33
    gaigechunfeng  
       2020-03-19 15:44:02 +08:00
    我支持楼主。难的东西总要有人做,做出来就能出成果。
    记得写好了给我们用用就行。
    加油!
    lin
        34
    lin  
       2020-03-19 15:53:04 +08:00
    可以在微信小程序上用么?
    vsitebon
        35
    vsitebon  
       2020-03-19 16:31:05 +08:00
    @ipwx https://github.com/marktext/muya 可以关注这个仓库,类 typora 渲染
    NonClockworkChen
        36
    NonClockworkChen  
       2020-03-19 17:11:34 +08:00
    你好空啊
    jojuniori
        37
    jojuniori  
       2020-03-19 17:13:24 +08:00
    有现成的功能较全的轮子了: https://pandao.github.io/editor.md/
    myliang
        38
    myliang  
       2020-03-19 17:47:10 +08:00 via Android
    别问,干就完了
    mengkun
        39
    mengkun  
       2020-03-19 18:15:40 +08:00   ❤️ 1
    看了一下 DEMO,设计理念似乎与这个有点像 https://editorjs.io/
    Charod
        40
    Charod  
       2020-03-19 18:26:38 +08:00
    祝你好运
    minglanyu
        41
    minglanyu  
       2020-03-19 18:29:32 +08:00
    坑真的多,加油盆友
    TangMonk
        42
    TangMonk  
       2020-03-19 18:33:42 +08:00
    不如研究下 Ckeditor
    Lightio
        43
    Lightio  
       2020-03-19 19:47:48 +08:00
    现在看到富字开头的东西都以为是起名帖了,,,
    zxCoder
        44
    zxCoder  
       2020-03-19 19:51:02 +08:00
    @nightwitch 真有人用这种文字吗
    zhuangzhuang1988
        45
    zhuangzhuang1988  
       2020-03-19 19:57:26 +08:00
    别.
    pomelotea2009
        46
    pomelotea2009  
       2020-03-19 20:04:36 +08:00 via Android
    别走两个极端:一种是完全 WYSIWYG 比如 Typora,另一种是分视图预览。建议光标所在的行显示 source code 不要预览,光标不在的行显示预览,这样可以避免很多问题
    HangoX
        47
    HangoX  
       2020-03-19 20:06:22 +08:00   ❤️ 1
    我会说看成了富婆编辑器吗。。。
    msaionyc
        48
    msaionyc  
       2020-03-19 20:31:36 +08:00
    祝好运,我一个用的人都有阴影,这玩意 bug 太多了。
    加油
    thulof
        50
    thulof  
       2020-03-19 20:53:57 +08:00
    商业级别的很难,要考虑很多
    thulof
        51
    thulof  
       2020-03-19 20:56:12 +08:00
    试用了一下 demo,当进入多级列表的时候,无法退出多级列表了,再尝试几次撤销之后,白屏了。
    vendors~app.chunk.9b186841b0c756e84f5f.js:81 TypeError: Cannot read property 'align' of undefined
    Felldeadbird
        52
    Felldeadbird  
       2020-03-19 21:00:03 +08:00
    给楼主一个方向。
    在做好 PC 的同时,也可以做好移动用户。
    guudsltd
        53
    guudsltd  
       2020-03-19 21:08:30 +08:00
    弄个上传剪切板图片的功能
    whatsmyip
        54
    whatsmyip  
       2020-03-19 21:09:55 +08:00
    支持开源造轮子

    反馈一个 bug,添加超链接之后,想要取消,全选这部分文字之后焦点总是被自动定位到链接框
    derek80
        55
    derek80  
       2020-03-19 21:16:07 +08:00
    了解下: https://github.com/outline/rich-markdown-editor 也是基于 Slate.js 的。其实希望语雀的大部分功能可以实现,比如 plantuml 等。
    jaynos
        56
    jaynos  
       2020-03-19 21:40:11 +08:00
    在 quote 块中, 光标放在"在 block 为空时"之前, 回车几次, 删除几次, 就可以复现一个白屏 bug

    本来我也想给博客造个简单的富文本编辑器轮子, 最后我还是老实的用 textarea 了, 楼主保重
    jaynos
        57
    jaynos  
       2020-03-19 21:41:56 +08:00
    鼠标 hover 在 header 的+上, 直接就炸了

    Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful
    zhw2590582
        58
    zhw2590582  
       2020-03-19 22:06:31 +08:00
    勇气可嘉,但还真是不建议花时间研究这个,现在流行的富文本编辑器都不是一个人能完成的。
    adjusted
        59
    adjusted  
       2020-03-19 22:24:45 +08:00
    我们内部有维护一个基于 prosemirror 和 react 的编辑器,有兴趣可以聊聊 wx 就是 id
    aa23
        60
    aa23  
       2020-03-19 22:30:32 +08:00
    我也在计划写一个,不过我想做的更偏向与在线文档方面
    iszengmh
        61
    iszengmh  
       2020-03-20 07:42:33 +08:00 via Android
    要防止注入
    DemonQ
        62
    DemonQ  
    OP
       2020-03-20 09:51:22 +08:00
    @whatsmyip 这是我的交互没想清楚咋搞。。。
    zarte
        63
    zarte  
       2020-03-20 09:58:44 +08:00
    @DemonQ 开源了吗?求连接。
    DemonQ
        64
    DemonQ  
    OP
       2020-03-20 10:01:34 +08:00
    @zarte 请仔细看题
    blackboom
        65
    blackboom  
       2020-03-20 10:43:20 +08:00
    Slate.js 确实是天坑,最后还是要回归到 Draft.js
    xuanbg
        66
    xuanbg  
       2020-03-20 11:04:54 +08:00
    富文本编辑器是最大天坑,没有之一!

    要说有什么痛点或者坑点,那倒是只有一个,就是:你永远也满足不了用户的需求……
    yuankui
        67
    yuankui  
       2020-03-20 11:05:21 +08:00
    slatejs 是真的坑。
    从 0.4 到 0.5 版本升级后,底层数据模型,上层 api 全 TMD 的换了。
    准备研究下 proseMirror
    zhzbql
        68
    zhzbql  
       2020-03-20 11:46:30 +08:00
    不管是勇气可嘉还是真大佬,先占座留个名,万一以后火了呢
    mauve
        69
    mauve  
       2020-03-20 11:49:37 +08:00
    迎难而上,🐛
    wuhhhh
        70
    wuhhhh  
       2020-03-20 14:34:51 +08:00
    开头以为是换皮 看底下评论感觉难得一批 心想没什么难啊 都是抄 翻上去一看 自己写 打扰了 前排留名等一个大佬
    XTTX
        71
    XTTX  
       2020-03-20 15:19:05 +08:00
    @DemonQ 我最近在研究富文本编辑器. 如果要做点不同的东西我推荐一些奇特的排版功能. table 都有了, 可以试试做平行 tab. 别人用 BBcode 实现的一些复杂排版. 我正在规划的一个产品就有这种图文并茂的排版需求
    DemonQ
        72
    DemonQ  
    OP
       2020-03-20 15:45:26 +08:00
    @XTTX 以前的产品做过这种需求,我现在的结构正在规划这种情况,有兴趣的话可以从 github 加下我 qq 来讨论下~
    redeyesovo
        73
    redeyesovo  
       2020-03-20 15:55:17 +08:00
    就叫富有富文本编辑器吧。🐶
    qile1
        74
    qile1  
       2020-03-20 17:52:48 +08:00 via Android
    web 端所有的富文本有个缺点是无法自动分页,尤其是有很大一部分专业网站的报告输入的时候需要 A4 或者 B5 打印时候,长文本就没法分页了,现在一些商业产品也必须安装控件才能实现分页功能,楼主能解决我愿意花钱弄下
    jss
        75
    jss  
       2020-03-20 20:03:52 +08:00 via iPhone
    富文本编辑器,我只服 Froala,其他都是垃圾…
    lithbitren
        76
    lithbitren  
       2020-03-21 06:42:25 +08:00
    浏览器兼容性是真的天坑
    Hanser002
        77
    Hanser002  
       2020-11-06 20:37:58 +08:00
    题主做的蛮好的- -
    zhdsuperm
        78
    zhdsuperm  
       2020-12-24 14:53:01 +08:00
    bug:ctrl + A 再用输入法输入文字,直接奔溃
    enther
        79
    enther  
       2021-05-04 16:25:52 +08:00
    @ericls 您好,我们刚刚走过你说的每一个坑。。。介意加个微信聊聊吗? 412078668
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1060 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:53 · PVG 03:53 · LAX 11:53 · JFK 14:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.