爱意满满的作品展示区。
88250

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

  •  2
     
  •   88250 ·
    88250 · Feb 11, 2019 · 7789 views
    This topic created in 2823 days ago, the information mentioned may be changed or developed.

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

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

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

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


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


    开源,ts 编写,支持插件,所见即所得。
    azh7138m
    azh7138m
    Feb 12, 2019
    20
    一开始觉得是因为支持嵌套 HTML 所以解析器难写,看了下,只支持少量的标签,不支持属性,align 这种属性也不支持,emmmmmm。
    话说这个定位下一代的话,那 draftjs 之流是看做这一代吗?
    88250
    88250
    OP
    Feb 12, 2019
    21
    @azh7138m md 服务端渲染的,为了安全考虑过滤掉了大部分标签还有属性。
    azh7138m
    azh7138m
    Feb 12, 2019
    22
    @88250 那,委实说,看不出 下一代 与 未来 在哪里。
    88250
    88250
    OP
    Feb 12, 2019
    23
    @azh7138m 在开发中,抓紧打码
    TKKONE
    TKKONE
    PRO
    Feb 14, 2019 via Android❤️3
    24
    那就留个黑历史脚印吧,避免后面有人不了解作者的人品:
    https://www.v2ex.com/t/534800#reply49
    jishu541464750
    jishu541464750
    Feb 19, 2019
    25
    问:这个项目有挖矿代码吗?
    按你之前的评论,你说的是你的开源项目都是有挖矿代码的?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5287 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 02:14 · PVG 10:14 · LAX 18:14 · JFK 21:14
    ♥ Do have faith in what you're doing.