关于 Vditor 自定义渲染的问题

比如不同方法参数及参数的含义的说明。

举例:

renderLink 方法,我猜它的参数应该是例子中 node, entering。可是我想取链接的 href 和文本该如何取呢?

console.log(node)的内容中也没看到有相关的变量。

因为文档写的比较简单,实在是无从下手,请问有没有详尽的文档?


刚刚测试 node.Text()取得了链接文本,href 还在一个一个试。😂

  • Vditor

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

    132 引用 • 957 回帖 • 2 关注

广告 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 88250
    订阅者

    链接的锚文本和 href 是两个子节点 LinkTextLinkDest,请参考这里

    1 回复
  • mywing
    支持者 订阅者 作者

    我可能没说清楚,目前的需求是将 markdown 的链接 [链接](http://www.abc.om) 渲染成 html 时,给链接加一个属性。如:<a href='http://www.abc.com' customAttr='aaaa'>链接</a>

    参考文档,我是这样写的:

    renderLink: (node, entering) => {
        if (entering) {
            return [`<a href='${这里不知道如何获取markdown中的链接地址}' class='popup'>`, Lute.WalkContinue]
        } else {
            return [`</a>`, Lute.WalkContinue]
        }
    },
    

    按上面的做法已经可以渲染出 html 的超链接,只是不知道在渲染时如何获取 markdown 的链接地址。求解!!!

    1 回复
  • 88250
    订阅者

    估计得看下 node 的属性,里面应该有子节点属性 first,用 node.first.next 沿着这个树路径看下,找到 LinkDest 节点,这个节点就是 href 了。

    1 回复
  • mywing
    支持者 订阅者 作者

    感觉 node.__internal_object__.Next 像,只是打印出来 Next 下的所有方法都是异常 console.log(node.__internal_object__.Next)

    image.png

    1 回复
  • 88250
    订阅者

    看下 token 字段或者用 tokenstr 函数。

    2 回复
  • mywing
    支持者 订阅者 作者

    node 没有 token 字段,只有个 node.TokensStr()函数,但打印出来是空字符。

  • mywing
    支持者 订阅者 作者

    刚测试发现,在 renderLinkDest 中 node.TokensStr()方法是可以取到链接地址,但取不到文本。而 renderLink 方法是能取到文本 node.Text(),却取不到链接 node.TokensStr()

    想要实现增加自义定属性好像不行呀,这可咋整呢?

    1 回复
  • 88250
    订阅者

    文本在 LinkText 节点上。

请输入回帖内容 ...