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

wtdf.io 一个支持 Markdown 语法、适合写作用的所见即所得网页编辑器

  •  
  •   keelii ·
    keelii · 2019-05-31 18:52:36 +08:00 · 3387 次点击
    这是一个创建于 2033 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先上图:

    wtdf.io

    wtdf.io

    wtdf.io 是一个基于网页的 WYSIWYG^[What You See Is What You Get — 中译「所见所得」] 富文本编辑器,名称取自「writing different 」的关键字母。同时 代表使用这个工具的四种主要特性,即:writing/transform/delete/finish, fast。

    不同于其它富文本编辑器,wtdf 只提供了一些大部分人常用的编辑功能,比如:加粗,斜体等。整体而言 wtdf 比较适合于用来完成少量的写作任务,或者公众号文章的撰写。

    功能特性

    • 轻量级,超快加载速度

    • 简洁优雅的排版,符合垂直韵律^[Vertical rhythm -- 中译「垂直韵律、基线韵律」],最佳的阅读体验

    • 支持 Markdown 语法,使用手册

    • 支持字体 /暗色 /阅读配色主题设置

    • 支持导出到 Github gist 和微信公众号文章格式(.html/.md )

    技术实现

    wtdf 主要使用了 Prosemirror 这个编辑器来实现编辑功能。它解决了大部分编辑器要面临的棘手问题:严格控制内容的格式 /嵌套规范、事务系统、以及对于编辑器内容的完全控制能力。wtdf 现在仅支持 WEB 端,未来(视具体情况而定)会支持桌面端应用、APP、小程序等终端。

    产品定义

    wtdf 要解决的主要问题是:

    无论何时何地当你有写作灵感时,随时可以使用它来记录一些与众不同的想法。

    设计风格

    wtdf 的设计灵感部分来自 telegra.ph,同时增加了一些小功能,优化了许多用户体验的问题。整个编辑器的操作使用了一些惯例,这些使用方法通常是不需要用户关心的,而且大多数情况下总会默默地执行,比如粘贴一个链接会自动转换成一个链接标签,粘贴一个 Youtube 链接会自动转换成一个可观看的内嵌页面。

    常见问题

    Q:<u>为什么不做纯 Markdown 编辑器</u>?

    A:通过 Markdown 源码写作的方式虽然很独特,但是它并不适用于所有人。人们总是喜欢 所见即所得 的编辑方式。无论通过源码写作的方式如何流畅,即使使用像 Typora 这样卓越的编辑器,也不免产生很多的「杂音」,所谓的「杂音」就是一些内容之外的东西,比如 Markdown 的各种符号,这种杂音会让使用者分心,并且不可避免地陷入中英文符号、空格使用的纠结情绪中。

    Q:<u>为什么不支持 XX 功能</u>?

    A:作为工具型产品,我并不想对他有任何重度依赖。就像微信一样,用的时间越长我们对他依赖就越重。实际上这并不是一种好的现象,或许有比微信更好的产品可以试试呢。人们总是希望把所有的功能统一到一个应用里面,但问题是功能越来越多,应用的维护成本也越来越高,最后势必商业化做成大众喜欢的工具

    Q:<u>主什么不支持老版浏览器</u>?

    A:有舍才有得,不放弃老的习惯就无法适应新的变化。就是因为放弃了支持老版本浏览器,功能特性 才得以实现。另外这是一个免费提供给用户使用的应用,我需要在上面花时间同时又不想把时间浪费在兼容性上。

    Q:<u>内容丢失如何恢复</u>?

    A:请参照使用手册中的最后一项「内容恢复

    Q:<u>如何支持这个项目</u>?

    A:如果这个工具确实帮到了你,同时你也想表达一点谢意,那么请去我的一个 Github 项目主页,在一个并不显眼的地方可以赞赏。

    8 条回复    2019-06-02 18:23:55 +08:00
    keelii
        1
    keelii  
    OP
       2019-05-31 18:56:37 +08:00
    再来个关于页面截图:

    ![wtdf.io - about]( )
    yiwei20000wj
        2
    yiwei20000wj  
       2019-05-31 19:50:06 +08:00
    不错,支持一下~
    justin2018
        3
    justin2018  
       2019-05-31 22:46:40 +08:00
    我想到了这个网站 😅 很好 已收藏 谢谢楼主~~~

    ![]( )
    keelii
        4
    keelii  
    OP
       2019-06-01 08:28:46 +08:00
    @justin2018 设计几格上的确模仿了 telegra.ph 😀
    cdlnls
        5
    cdlnls  
       2019-06-02 09:06:21 +08:00
    网站里面有几个链接指向的是 0.0.0.0:8990
    About 和 Guide
    keelii
        6
    keelii  
    OP
       2019-06-02 13:16:58 +08:00
    @cdlnls 哎哟我擦。谢老哥提醒,已更新。
    hcs66
        7
    hcs66  
       2019-06-02 16:07:57 +08:00
    支持,[tiptap]( https://tiptap.scrumpy.io/)也是基于 prosemirror,可以参考下~
    keelii
        8
    keelii  
    OP
       2019-06-02 18:23:55 +08:00
    @hcs66 yes, 不过我不用 vue,小工具不用这些框架加载速度嗖嗖滴,即使服务器在 hk 😃
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1015 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:17 · PVG 06:17 · LAX 14:17 · JFK 17:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.