V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zxCoder
V2EX  ›  问与答

像 typora 这种原地渲染显示的 markdown 编辑器原理是什么呢,需要用 textarea 写一个简单的,能做到吗

  •  
  •   zxCoder · 2021-10-18 08:42:44 +08:00 · 3336 次点击
    这是一个创建于 892 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有个任务需要写一个超级简单的编辑器,大概就是支持 markdown 的一小部分语法。左边源文本,右边预览这种比较简单,那如果要做到原地渲染显示,需要怎么做呢?完全没有思路

    13 条回复    2021-12-03 07:42:11 +08:00
    jackmod
        1
    jackmod  
       2021-10-18 08:48:31 +08:00
    vscode 的 markdown 插件也可以实时预览,或许可以参考。
    4ark
        2
    4ark  
       2021-10-18 08:50:01 +08:00 via iPhone
    为什么不用开源的?搜一下 markdown editor
    ihainan
        3
    ihainan  
       2021-10-18 08:56:30 +08:00
    有开源实现 vditor 可以参考一下,楼上的 markdown editor 也是基于 vditor 做的实现。

    https://github.com/Vanessa219/vditor
    Panway
        4
    Panway  
       2021-10-18 09:20:29 +08:00
    Typora 应该是前端渲染的,这类编辑器开源的可太多了:

    https://doocs.github.io/md/#/

    https://labs.lyric.im/wxformat/

    https://github.com/markedjs/marked
    myd
        5
    myd  
       2021-10-18 09:25:16 +08:00
    contenteditable 属性
    bnm965321
        6
    bnm965321  
       2021-10-18 09:50:20 +08:00
    所见即所得是个很大的坑,目前市面上也就 typora 做的比较好。

    不过我不太喜欢所见即所得的编辑方式
    ihainan
        7
    ihainan  
       2021-10-18 10:07:28 +08:00
    @bnm965321 Typora 对我个人来说最大的痛点是没有网页端,VS 扩展 zaaack's Markdown Editor 配合 Code Server 算是某种程度上解决了这个问题而且体验相对最接近 Typora 的(虽然还是有差距)。

    ipwx
        8
    ipwx  
       2021-10-18 10:38:31 +08:00
    12tall
        9
    12tall  
       2021-10-18 15:03:20 +08:00
    我有一个没验证的想法,就是控件监听用户输入存到 localstorage 或者其他地方,然后再从 localstorage 渲染到控件。
    zhaiblog
        10
    zhaiblog  
       2021-10-18 16:15:46 +08:00 via iPhone   ❤️ 1
    @ihainan milkdown 不错,可以试试
    ihainan
        11
    ihainan  
       2021-10-18 17:11:49 +08:00
    @zhaiblog 试了一下在线 demo,不知道为啥我输入 $$ 会被转义,其他看起来挺棒,我研究一下,感谢!
    zqli92
        12
    zqli92  
       2021-11-09 11:12:22 +08:00
    如果你只要左编辑右预览,给你个方案:codemirror 做代码编辑器,markdown-it 或 remark 做渲染,上面说的基本都是这种,很容易做,掘金、腾讯开源的 markdown 编辑器都是这么做的,如果想要所见即所得,类似 word 那种,就是上面说的 milkdown ,这种也非常多,开发难度高一点(因为文档字符流是分离的),可以基于 prosemirror 或者 slatejs 去做,基本 markdown 标记都是有的,官方 demo 直接就是这种了。类似 typora 那种难度比较大,目前在线版本只看到一个: https://markdowner.net ,体验非常接近了,也支持 latex ,表格功能更好用
    mirone
        13
    mirone  
       2021-12-03 07:42:11 +08:00
    @zqli92 其实我个人感觉第三种可能在技术难度上没有第二种大,因为只要把每个编辑的位置替换成一个源码模式的编辑框就好了,需要解决的 coner case 可能还没有第二种多。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2918 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:16 · PVG 23:16 · LAX 08:16 · JFK 11:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.