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

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

  •  
  •   zxCoder · 52 天前 · 1534 次点击
    这是一个创建于 52 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    https://github.com/Vanessa219/vditor
    Panway
        4
    Panway  
       52 天前
    Typora 应该是前端渲染的,这类编辑器开源的可太多了:

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

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

    https://github.com/markedjs/marked
    myd
        5
    myd  
       52 天前
    contenteditable 属性
    bnm965321
        6
    bnm965321  
       52 天前
    所见即所得是个很大的坑,目前市面上也就 typora 做的比较好。

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

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