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

♏ Vditor 一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现

  •  2
     
  •   88250 ·
    88250 · 2019-02-11 10:04:28 +08:00 · 6269 次点击
    这是一个创建于 2102 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vditor
    下一代的 Markdown 编辑器,为未来而构建

    简介

    Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。

    背景

    我们在开发 Sym 的初期是直接使用 WYSIWYG 富文本编辑器的。那时候基于 HTML 的编辑器非常流行,项目中引用起来也很方便,也符合用户当时的使用习惯。

    后来,Markdown 的崛起逐步改变了大家的排版方式。再加上我们其他几个项目都是面向程序员用户的,所以迁移到 md 上也是大势所趋。我们选择了 CodeMirror,这是一款优秀的编辑器,它对开发者提供了丰富的编程接口,对各种浏览器的兼容性也比较好。

    再后来,随着我们项目业务需求方面的沉淀,使用 CodeMirror 有时候会感到比较“笨重”。比如要实现 @自动完成用户名列表、插入 Emoji、上传文件等就需要比较深入的二次开发,而这些业务需求恰恰是很多项目场景共有且必备的。

    终于,我们决定开始在 Sym 中自己实现编辑器。随着几个版本的迭代,Sym 的编辑器也日趋成熟。在我们运营的社区黑客派上陆续有人问我们是否能将编辑器单独抽离出来提供给大家使用。与此同时,我们的前端主程 V 同学对于维护分散在各个项目中的编辑器也感到有点力不从心,外加她最近在学 TypeScript 正好需要练手实践,所以就决定使用 ts 来实现一个全新的浏览器端 md 编辑器。

    于是,Vditor 就这样诞生了。

    功能

    • 插入原生 Emoji、设置常用表情列表
    • 自定义工具栏按钮、提示、插入文案及快捷键
    • 可使用拖拽、剪切板粘贴上传,显示实时上传进度
    • 支持 CORS 跨域上传
    • 内容保存本地存储,防止意外丢失
    • 录音支持,用户可直接发布语音
    • 粘贴 HTML 自动转换为 Markdown
    • 提供实时预览、滚动同步定位
    • 支持主窗口大小拖拽、字符计数
    • 多主题支持、内置黑白两套
    • 多语言支持、内置中英文
    • 支持主流浏览器和移动端

    v

    v

    案例

    • Sym:一款用 Java 实现的现代化社区(论坛 /BBS/社交网络 /博客)平台
    • Solo:一款小而美的博客系统,使用 Java 实现
    • Pipe:一款小而美的博客平台,使用 Go 实现

    文档

    授权

    Vditor 使用 MIT 开源协议。

    社区

    鸣谢

    25 条回复    2019-02-19 09:41:12 +08:00
    frylkrttj
        1
    frylkrttj  
       2019-02-11 10:15:07 +08:00
    厉害了
    6IbA2bj5ip3tK49j
        2
    6IbA2bj5ip3tK49j  
       2019-02-11 10:29:30 +08:00   ❤️ 2
    其实我觉得这种左右预览的已经过时了。
    Markdown 本身设计就是简单语法,让你不需要预览就能知道内容样式。
    需要预览的,实际上他们需要的是 typora 那种 WYSIWYG 的体验,左右预览只是一种妥协。
    88250
        3
    88250  
    OP
       2019-02-11 10:34:31 +08:00
    @xgfan 感谢建议,融合在编辑视图中所见即所得我们也考虑过,但是排版方面比较难实现,后续会继续迭代,做这方面的尝试。
    KasuganoSoras
        4
    KasuganoSoras  
       2019-02-11 10:52:32 +08:00
    我提供一个设计思路啊:
    1. 编辑框和预览框融合,分开每一行,然后给每一行都添加一个点击事件
    2. 在预览框可以直接点击一行来编辑,点击后在下方弹出一个悬浮编辑框
    3. 在编辑框中修改内容,预览框同步更新,这样就实现融合编辑的功能了
    mayne95
        5
    mayne95  
       2019-02-11 11:07:12 +08:00 via Android
    notion 的交互不错(我是个没有感情的 notion 吹…
    88250
        6
    88250  
    OP
       2019-02-11 11:08:04 +08:00
    @KasuganoSoras 感谢感谢!

    行级元素是可以这样实现,但是块级元素就比较难搞了。我正在写一个 Markdown 处理器,要实现类似的“高级功能”得在语法层面搞才行,这样做局部刷新渲染也就有可能了,顺便还可以做格式化还有 lint。
    Kilerd
        7
    Kilerd  
       2019-02-11 11:08:57 +08:00 via iPhone   ❤️ 1
    老实说,这个一点都不下一代
    lrh3321
        8
    lrh3321  
       2019-02-11 11:17:12 +08:00 via Android
    不明觉厉
    laycher
        9
    laycher  
       2019-02-11 11:19:20 +08:00
    @Kilerd #7 我也这么觉得。
    FakeLeung
        10
    FakeLeung  
       2019-02-11 11:25:39 +08:00 via Android
    @Kilerd
    赞同。貌似大部分的编辑器都是这样的。

    不过楼主的开源精神很赞。
    azhangbing
        11
    azhangbing  
       2019-02-11 11:40:53 +08:00 via iPhone
    先支持 试一下再说!
    GitHubDaily
        12
    GitHubDaily  
       2019-02-11 12:07:18 +08:00   ❤️ 1
    loading
        13
    loading  
       2019-02-11 12:20:00 +08:00 via Android
    代→个
    nl101531
        14
    nl101531  
       2019-02-11 13:00:58 +08:00
    88250
        15
    88250  
    OP
       2019-02-11 13:09:40 +08:00
    @Kilerd
    @laycher
    @FakeLeung
    @azhangbing
    @GitHubDaily
    @loading
    @nl101531

    “下一代”是目标,还需要些时间进行迭代。现在做好基础功能,等解析器实现以后会有一个本质上的提升。感谢各位的支持和关注,我们会继续努力的。
    alen1995
        16
    alen1995  
       2019-02-11 13:13:46 +08:00 via iPhone
    Xiqiuqiu
        17
    Xiqiuqiu  
       2019-02-11 14:30:34 +08:00
    @KasuganoSoras #4 看到了 jupyter 的影子
    jkhere
        18
    jkhere  
       2019-02-11 20:37:55 +08:00
    厉害了,顶一下
    yuanfnadi
        19
    yuanfnadi  
       2019-02-12 13:27:26 +08:00
    markdown 编辑器


    https://www.v2ex.com/t/463103#reply62


    开源,ts 编写,支持插件,所见即所得。
    azh7138m
        20
    azh7138m  
       2019-02-12 13:41:35 +08:00
    一开始觉得是因为支持嵌套 HTML 所以解析器难写,看了下,只支持少量的标签,不支持属性,align 这种属性也不支持,emmmmmm。
    话说这个定位下一代的话,那 draftjs 之流是看做这一代吗?
    88250
        21
    88250  
    OP
       2019-02-12 13:58:53 +08:00
    @azh7138m md 服务端渲染的,为了安全考虑过滤掉了大部分标签还有属性。
    azh7138m
        22
    azh7138m  
       2019-02-12 14:28:24 +08:00
    @88250 那,委实说,看不出 下一代 与 未来 在哪里。
    88250
        23
    88250  
    OP
       2019-02-12 15:25:19 +08:00
    @azh7138m 在开发中,抓紧打码
    tumbzzc
        24
    tumbzzc  
       2019-02-14 12:47:31 +08:00 via Android   ❤️ 3
    那就留个黑历史脚印吧,避免后面有人不了解作者的人品:
    https://www.v2ex.com/t/534800#reply49
    jishu541464750
        25
    jishu541464750  
       2019-02-19 09:41:12 +08:00
    问:这个项目有挖矿代码吗?
    按你之前的评论,你说的是你的开源项目都是有挖矿代码的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5480 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 07:05 · PVG 15:05 · LAX 23:05 · JFK 02:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.