如何将已经 "embedded" 的 <a> 标签的 "target" 属性设置为 HTML？

Question

我正在使用 VueJS 和 Kentico Kontent 作为 CMS 开发一个网站。此 CMS 提供 "rich text" 功能，基本上允许文本内容嵌入链接和基本格式，当通过 API 提供时会自动转换为 HTML。

我使用 v-html 指令显示 HTML 内容没有问题，但我想不出一种方法来将内部 <a> 标签的属性设置为 _blank，以便嵌入链接在单击时打开新的 windows。

有什么优雅的方法可以做到这一点而不必从前端解析 HTML 吗？

Answer 1

您可以创建一个指令：

Vue.directive('links-in-new-window', {
  inserted: function(el) {
    const anchors = el.querySelectorAll('a')

    anchors.forEach((anchor) => anchor.target = "_blank")
  }

})

并将其应用于您正在使用 v-html 的相同元素：

<div class="content" v-html="content" v-links-in-new-window></div>

Answer 2

在 vue V3 中，指令如下所示：

app.directive('links-in-new-window', {
  mounted: function(el) {
    const anchors = el.querySelectorAll('a')
    anchors.forEach((anchor) => anchor.target = "_blank")
  }
})

HTML也是一样的，记得用v- => v-links-in-new-window

<div class="content" v-html="content" v-links-in-new-window></div>

如何将已经 "embedded" 的 <a> 标签的 "target" 属性设置为 HTML？

How can I set the "target" attribute of <a> tags which are already "embedded" into HTML?

html

vue.js

kentico

vue-directives

kentico-kontent