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

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

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

    376 引用 • 1860 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    326 引用 • 1395 回帖 • 2 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    84 引用 • 414 回帖
  • 人工智能

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

    115 引用 • 319 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 87 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖 • 1 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 363 关注
  • V2EX

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

    16 引用 • 236 回帖 • 240 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 370 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 618 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 179 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    134 引用 • 1127 回帖 • 110 关注
  • OneNote
    1 引用 • 3 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • Ruby

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

    7 引用 • 31 回帖 • 270 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 9 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 367 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 3 关注
  • AWS
    11 引用 • 28 回帖 • 6 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 28 回帖 • 1 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    415 引用 • 3598 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 710 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 408 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 11 关注