搞定 Vditor 自定义渲染超链接,其它原理也相同

本贴最后更新于 1530 天前,其中的信息可能已经沧海桑田

业务需要,须在 Markdown 渲染成 HTML 时,将所有超链接中增加自定义属性,如下:

Markdown 为:

[觅好图](http://mihaotu.com)

希望渲染后的超链接代码为:

<a href='http://mihaotu.com' my-attr='自定义属性'>觅好图</a>

按照官方文档例子,我们在 options.renderers 中绑定了方法 renderLink,如下:

renderLink: (node, entering) => { if (entering) { return [`<a href='${node.TokensStr()}' my-attr='自定义属性'>`, Lute.WalkContinue] } else { return ['</a>', Lute.WalkContinue] } }

其中 ${node.TokensStr()} 为超链接地址。可实际执行下来,${node.TokensStr()} 却总是空字符。渲染出的链接代码为: <a href my-attr='自定义属性'>觅好图</a>,href 后的链接地址为空。

仔细阅读官方文档,了解到链接属于行级节点,由链接相关标识符、链接文本等构成,其渲染函数为:

renderLink 及下级函数 renderOpenBracketrenderCloseBracketrenderOpenParenrenderCloseParenrenderLinkTextrenderLinkSpacerenderLinkDestrenderLinkTitle 组成。

也就是说,要将 markdown 的链接代码渲染为 html 超链接,Lute 引擎要调用以上所有函数。

简单分析一下调用链及函数之间的关系。

所有的函数都有两个参数,分别为 node 和 entering。node 为当前遍历到的节点,保存着当前节点的信息(renderLink 函数时,node 为根节点。renderLinkText 函数时,node 为子节点对象,保存着链接文本信息,renderOpenBracket 函数时,node 是另一个子节点对象,保存的是超链接 markdown 标识符 '[',其它函数都对应着超链接 markdown 代码的某部分的标识符,详见:链接)。entering 为遍历是否为进入节点。Lute 采用深度优先算法来遍历树,在进入节点时 entering 为 true,离开节点时为 false,我们可以简单理解为每个 render 函数都会被调用两次,entering 为 true 时表示第一次调用,false 时为第二次调用。如图:

render...renderLinkTextrenderLinkLuterender...renderLinkTextrenderLinkLute1. 进入(entering:true 第1次调)12. 进入(entering:true 第1次调)23. 离开(entering:false 第2次调)34. 进入(entering:true 第1次调)45. 离开(entering:false 第2次调)56. 进入(entering:false 第2次调)6

回到最初的代码,我在 entering 为 true 时返回了 <a href='${node.TokensStr()}' my-attr='自定义属性'>,为 false 时返回了 </a>,再由 Lute 将 renderLinkText 函数渲染的链接文字拼接在这两次调用的中间,就组成了完整的 html 超链接代码。可是,为什么中 renderLink 函数中,${node.TokenStr()} 取不到值呢?

按照上面的分析得知,在遍历不同 render 函数时,node 都是不同的对象。因此不能在 renderLink 函数的 node 中取到 renderLinkDest 函数解析后的值。

又因为 node 是嵌套引用结构(node -> node ->node),我们是不是也可以通过遍历 node 从中获取到正确的链接地址呢?遗憾的是,我没找到 node 有获取 child 和 parent 的属性/函数,望 V 大/D 大看到后能告知。这种情况下,我们又该如何实现目标呢?

根据 render 函数的调用顺序及相关特性,我的做法如下:

1. renderLinkDest 函数

该函数用于渲染超链接地址,可以在 node 参数中获取到链接地址。因此我将此时获取到的链接地址临时保存在变量 myLink 中,便于 renderLink 函数中使用。

renderLinkDest: (node, entering) => { if (entering) { this.myLink = node.TokensStr() return [``, Lute.WalkContinue] } return [``, Lute.WalkContinue] }

2. renderLink 函数

按照上面图中的调用顺序,在 entering 为 true 时,renderLinkDest 函数还没有执行,因此 myLink 为空,此时我们返回空 [``, Lute.WalkContinue]。而在 entering 为 false 时,renderLinkDest 已经执行完毕,因此变量 myLink 已有值,我们在此时返回完整的 html 超链接代码。

renderLink: (node, entering) => { if (entering) { return [``, Lute.WalkContinue] } else { return [`<a href='${this.myLink}' my-attr='自定义属性'>${node.Text()}</a>`, Lute.WalkContinue] } }

按照以上方法处理后,会渲染出如下代码:

<p>"觅好图"<a href='http://mihaotu.com' my-attr='自定义属性'>觅好图</a></p>

页面上多了一个链接文本,这是由于调用链中默认的 renderLinkText 函数渲染的结果。我们只要在该函数中返回空即可。如下:

renderLinkText: (node, entering) => { if (entering) { return ['', Lute.WalkContinue] } else { return ['', Lute.WalkContinue] } },

到此,在超链接中增加自定义属性的需求算是完成了。但有几个遗留问题:

  1. renderLink 在函数中无法通过 node.TokensStr() 获取链接地址,却可以通过 node.TokenLen() 获取字符个数(不清楚此时字符是什么);
  2. 无论 entering 为 true 还是 false,renderLink 函数中都可以通过 node.Text() 获取到链接文本。如果 node 是嵌套链结构,那应该取不到任何内容呀!
  3. node 的 child 和 parent 到底该如何获得?

建议:

为了便于开发,建议在所有 render 下级函数执行完毕后,都能将结果同步到根 note 中。或提供函数,获取相应的值。

题外话:

由于 method.min.js 和 index.min.js 不可同时引入,如果页面上有 Vditor 编辑器时该如何自定义渲染呢?官方文档好像没的写,这里记录一下,只要在 options.after() 中加入如下代码即可:

after: () => { this.contentEditor.vditor.lute.SetJSRenderers({ renderers: { Md2VditorIRDOM: { // 请根据不同的模式选择不同的渲染对象 renderLink: (node, entering) => { if (entering) { return [``, Lute.WalkContinue] } return [``, Lute.WalkContinue] } }, } }) }
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    366 引用 • 1842 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • HerbertHe

    Lute 的渲染逻辑是先分块级元素,再分行级元素,然后逐层嵌套进行渲染的。所有的文本内容到最后其实都是 renderText() 这个做的文本渲染,建议逐层自定义的方式进行实现。node.Text() 的属性是包含所有子节点的文本内容,并不能拿到链接。在给 Lute PR 的时候发现了这个问题,如果是列表的话,这个会拿到所有的子项源数据。node 并不完全是嵌套结构,标识符渲染、文本渲染其实是平级的。

  • HerbertHe

    Lute 里面有很多 vditor 文档里面没有表现的节点信息,具体可以参考 lute 源码里面的渲染器 https://github.com/88250/lute/blob/master/render/html_renderer.go#L33

  • Yu-Core

    node 有一个 ChildByType 函数,但是不知道怎么用。

    只能参考源码写了一个简单的

    41 是 renderLinkDest 的 node 的 Type 值,下面的链接里有各种对应

    lute/ast/node.go at master · 88250/lute (github.com)

    可惜 js 和 go 都不太会,没找到更好的办法。

    let c = ChildByType(node, 41); console.log(c.TokensStr()); function ChildByType(node, type) { let c = node.__internal_object__.FirstChild; while (c !== null) { if (c.Type === type) { return c; } c = c.Next; } return null; }
  • chaobei

    大佬,这个写法能用来保留 p 标签的 id 以及 class 属性吗?

推荐标签 标签

  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 703 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 35 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 646 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    183 引用 • 1011 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 347 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 613 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 21 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 651 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 495 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 226 回帖 • 136 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 2 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 3 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 230 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    159 引用 • 305 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 270 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 298 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • Visio
    1 引用 • 2 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 2 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 16 关注