V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
renmu123
V2EX  ›  分享创造

分享一个我最近在维护的 Vue 块状编辑器项目以及一些个人情绪吐槽

  •  1
     
  •   renmu123 · 2020-11-01 20:04:51 +08:00 · 3242 次点击
    这是一个创建于 1462 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

    这是一个 fork 自 All-in-one 项目的分支

    我维护这个项目初衷和 CedarXi 这位老哥的想法类似,也是要做一个类似 notion 的编辑器,在 github 上搜索的时候发现了这个项目,看到作者停更了就想着我来维护一下,懒得重新开一个轮子。

    但是在维护项目的时候发现原代码可维护性和拓展性是比较差的,各种代码都是复制黏贴一梭子,完全都没有进行抽象,虽然说利用了 vuex 来进行数据维护,但是并没有通过 Mutation 来进行数据维护,而是直接修改 object 的数据。导致了有些数据的更改无法进行追踪。

    之后我大刀阔斧进行了重构,虽然说现在的 UI 与原版的 UI 没什么太大差别,但是背后的代码却是差别比较多的。

    详细内容可以到 v-block-editor 项目查看,欢迎 star and pr

    v-block-editor 是什么

    v-block-editor 是一个开源的模块化内容构建编辑器,它不同于传统的文本编辑器,所有的内容都是以模块的概念来打造。灵感来自 Notion

    与原版的差异

    1. 对组件的代码进行了大幅度重构和内部组建的抽象,现在底层的一些模块复用同一个模块
    2. 每次的数据的变更利用 vuex 的 Mutation 进行操作而不是利用 js 的 object 的浅复制完成数据更改
    3. 将整个组件从 Home.vue 从拿出来,而不是硬耦合在一起,方便之后直接上传到 npm 上
    4. 对原项目中的一些光标进行了处理更加人性化的处理,比如方向左右键可以跨组件,去除了方向上下键的 300ms 延迟
    5. 增加了 Ctrl+Z 和 Ctrl+Y 的撤销重做
    6. 增加了图片组件
    7. Hint 组件可以修改左侧的 borderColor

    灵活的插拔

    所有的模块都以 Vue 组件的形式编写,可以灵活插拔。你可以用 v-block-editor 编辑器构建一个模块化的内容平台,可以在一个页面里插入任何其他模块,就像 Notion 一样

    纯净的输出

    所有组件保存的数据,都以对象的的形式存储在 Vuex 里供不同组件调用

    TODO

    👏 已实现的模块

    • [x] 纯文本
    • [x] 待办清单
    • [x] 标题 1
    • [x] 标题 2
    • [x] 标题 3
    • [x] 符号列表
    • [x] 提示栏
    • [x] 组件的拖拽移动
    • [x] 允许使用 Ctrl+Z 和 Ctrl+Y 来执行撤销和重做
    • [x] 图片模块(可以调整大小,通过黏贴事件载入剪切板中的图片)

    🧑‍💻 待开发的模块

    • [ ] 事件节点组件
    • [ ] 图片上传 requeset
    • [ ] 表格组件
    • [ ] 看板组件
    • [ ] emoji 组件
    • [ ] 插件化开发设置

    个人的一些情绪吐槽

    维护开源项目真的是累人,最近两周基本都是全部的业余时间都在这上面的,也只是完成了初步的功能其中也涉及到了许多在业务开发中不会遇到的大小,这个项目我之后应该会一直维护下去,最终的目标看你是想做一个开源版的 notion 。

    说实话这个项目的完成度还比较低,本来是不想在今天就来 V 站进行宣传的。然而今天在写这个项目的时候,得知一个比较喜欢的女孩有了男朋友的事,之后内心一阵空虚,需要平静一段时间,就先把这项目拉出来溜溜吧。看看大家有什么反馈吧。

    这里最后说一句:希望大家能好好把握住自己喜欢的人,技术不是一切,生活才是

    18 条回复    2023-08-24 23:51:06 +08:00
    woshipanghu
        1
    woshipanghu  
       2020-11-01 20:16:38 +08:00 via iPhone
    看到最后怎么笑了 送一个 star 安慰下
    CallMeReznov
        2
    CallMeReznov  
       2020-11-01 20:18:35 +08:00   ❤️ 2
    大几十行字加起来没有最后一行捉心.
    johnsona
        3
    johnsona  
       2020-11-01 20:19:24 +08:00
    这种感受就很美好
    ETiV
        4
    ETiV  
       2020-11-01 20:20:45 +08:00 via iPhone
    图片上传 requeset

    拼错了
    renmu123
        6
    renmu123  
    OP
       2020-11-01 20:22:26 +08:00
    @ETiV #4 谢谢提醒
    renmu123
        7
    renmu123  
    OP
       2020-11-01 20:23:21 +08:00
    @jsisjs20130824 #3 这种感觉特别不美好,令人生草
    suzic
        8
    suzic  
       2020-11-01 20:26:42 +08:00 via Android
    已 star 。也常有做一个编辑器的想法,总下不了决心,担心自己技术不够
    johnsona
        9
    johnsona  
       2020-11-01 20:40:56 +08:00
    @renmu123 当你有一天不再为得不到的女神而辗转反侧,当你觉得女神也不过如此,那才令人生草
    renmu123
        10
    renmu123  
    OP
       2020-11-01 20:50:11 +08:00 via Android
    @suzic 你可以尝试看看源码,现在并不复杂,我也有写了一些注释
    missdeer
        11
    missdeer  
       2020-11-01 21:31:17 +08:00 via Android
    真是个悲伤的故事,少写点代码,多约会妹子,生活会有乐趣得多
    NeoChen
        12
    NeoChen  
       2020-11-01 21:41:28 +08:00 via iPhone
    有了男朋友不等于老公,只要锄头挥得好,没有墙角挖不倒。
    oneforallsoft
        13
    oneforallsoft  
       2020-11-01 21:52:02 +08:00 via Android
    惟草木之零落兮 恐美人之迟暮
    别看太重 把心思放在钱上
    renmu123
        14
    renmu123  
    OP
       2020-11-01 21:58:49 +08:00 via Android
    @NeoChen 这是我唯一欣慰的,生米还没煮成熟饭
    pigzzz
        15
    pigzzz  
       2020-11-02 09:30:21 +08:00   ❤️ 1
    只是男朋友,还有机会
    meepo3927
        16
    meepo3927  
       2020-11-02 10:23:47 +08:00
    有些事挡不住的, 以后她还会结婚生娃, 有些事你得接受。

    我就是。
    zeronofreya
        17
    zeronofreya  
       2021-07-20 16:13:01 +08:00
    支持楼主,我挺喜欢 notion 的,但奈何时常打不开(众所周知的原因),虽然能突破枷锁,但还是想要本地化,网络最终只是备份
    guugg
        18
    guugg  
       2023-08-24 23:51:06 +08:00
    想找些有意义的项目,发现大多数所说的`一直维护下去`。结果已经是几年前了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   903 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 21:41 · PVG 05:41 · LAX 14:41 · JFK 17:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.