如何为v-md-editor渲染的a标签添加rel属性?

引入markdown-it-external-links

yarn add markdown-it-external-links --dev

拓展markdown-it

拓展是为了改变markdown-it的tokens，进而改变渲染后的文本

extend(md) {
      md.use(externalLinks, {
        externalClassName: 'custom-external-link',
        internalClassName: 'custom-internal-link',
        internalDomains: ['www.thinkmoon.cn'],
        externalRel: 'nofollow noopener noreferrer',
      });
    },

修改xss白名单

如果不修改白名单，会出现增加的属性，无法体现在最终渲染的html上。

 VMdPreview.xss.extend({
    // 扩展白名单
    whiteList: {
      a: ['target', 'href', 'title', 'rel'],
    },
  });

参考文档

扩展-markdown-it markdown-it-external-links

版权声明: 本文首发于 指尖魔法屋-如何为v-md-editor渲染的a标签添加rel属性?（https://blog.thinkmoon.cn/post/955_%E5%A6%82%E4%BD%95%E4%B8%BAv-md-editor%E6%B8%B2%E6%9F%93%E7%9A%84a%E6%A0%87%E7%AD%BE%E6%B7%BB%E5%8A%A0rel%E5%B1%9E%E6%80%A7_/） 转载或引用必须申明原指尖魔法屋来源及源地址！