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

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

业务需要,须在 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。

    380 引用 • 1869 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 属性吗?

推荐标签 标签

  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 65 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 117 关注
  • 创业

    你比 99% 的人都优秀么?

    81 引用 • 1395 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 39 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 60 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    211 引用 • 2042 回帖 • 1 关注
  • 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 回帖 • 8 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    337 引用 • 324 回帖 • 1 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 643 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    948 引用 • 1460 回帖 • 2 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    93 引用 • 122 回帖 • 620 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    50 引用 • 192 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • Kubernetes

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

    118 引用 • 54 回帖 • 10 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖 • 3 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 663 关注
  • gRpc
    11 引用 • 9 回帖 • 106 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 412 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • HHKB

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

    5 引用 • 74 回帖 • 522 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 269 关注
  • abitmean

    有点意思就行了

    35 关注
  • 印象笔记
    3 引用 • 16 回帖