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

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

  •  2
     
  •   88250 · 8 天前 · 2353 次点击

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

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

    不过楼主的开源精神很赞。
        11
    azhangbing   8 天前 via iPhone
    先支持 试一下再说!
        12
    GitHubDaily   8 天前   ♥ 1
        13
    loading   8 天前 via Android
    代→个
        14
    nl101531   8 天前
        15
    88250   8 天前
    @Kilerd
    @laycher
    @FakeLeung
    @azhangbing
    @GitHubDaily
    @loading
    @nl101531

    “下一代”是目标,还需要些时间进行迭代。现在做好基础功能,等解析器实现以后会有一个本质上的提升。感谢各位的支持和关注,我们会继续努力的。
        16
    alen1995   8 天前 via iPhone
        17
    Xiqiuqiu   8 天前
    @KasuganoSoras #4 看到了 jupyter 的影子
        18
    jkhere   7 天前
    厉害了,顶一下
        19
    yuanfnadi   7 天前
    markdown 编辑器


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


    开源,ts 编写,支持插件,所见即所得。
        20
    azh7138m   7 天前
    一开始觉得是因为支持嵌套 HTML 所以解析器难写,看了下,只支持少量的标签,不支持属性,align 这种属性也不支持,emmmmmm。
    话说这个定位下一代的话,那 draftjs 之流是看做这一代吗?
        21
    88250   7 天前
    @azh7138m md 服务端渲染的,为了安全考虑过滤掉了大部分标签还有属性。
        22
    azh7138m   7 天前
    @88250 那,委实说,看不出 下一代 与 未来 在哪里。
        23
    88250   7 天前
    @azh7138m 在开发中,抓紧打码
        24
    tumbzzc   5 天前 via Android   ♥ 3
    那就留个黑历史脚印吧,避免后面有人不了解作者的人品:
    https://www.v2ex.com/t/534800#reply49
        25
    jishu541464750   7 小时 4 分钟前
    问:这个项目有挖矿代码吗?
    按你之前的评论,你说的是你的开源项目都是有挖矿代码的?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3939 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 17ms · UTC 08:45 · PVG 16:45 · LAX 00:45 · JFK 03:45
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1