如何在 vue.js 中显示富文本内容？答案

【问题标题】：How can I display rich text content in vue.js?如何在 vue.js 中显示富文本内容？
【发布时间】：2020-02-08 23:11:12
【问题描述】：

我正在创建一个 Web 应用程序并尝试使用 vue.js 显示上传的富文本内容。富文本内容由 Action Text 创建，格式如下图。

<h1>text</h1><div>sample text<br><action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSI3Z2lkOi8vZWxvb3AtcmljaC9BY3RpdmVTdG9yYWdlOjpCbG9iLzEzP2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36dd18a0ed30ace4bc8442849d9dd3355bc86443" content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e887e47b082a537f647284bc0bfb6b6216f51216/deal.png" filename="deal.png" filesize="10394" width="256" height="256" presentation="gallery"></action-text-attachment></div>

我尝试在 vue.js 文件中显示这样的内容。

<div v-html=""></div>

然后，文本正确显示，但图像不显示。我该如何解决？

【问题讨论】：

<div v-html=""></div> 不显示任何内容。
那么您只是在问如何将<action-text-attachment> 转换为<img>？ url 属性是否指向该图像的正确位置？
@Dadboz 很抱歉我写得不好，我只是想指出我使用了这个指令。
@skirtle 没错，我想将转换为。网址正确。

标签： javascript html vue.js actiontext

【解决方案1】：

我不熟悉 Action Text 创建的富文本格式，因此无法评论将其与 v-html 结合使用是否安全。

一种方法是在插入文本之前对其进行操作。如果动作文本格式是非常可预测的，那么使用 RegExp 将不难。尝试更一般地解析 HTML 有点棘手。

在下面的示例中，我采用了不同的方法。这将使用 v-html 插入未更改的文本，然后更新 DOM 以插入 <img> 元素代替 <action-text-attachment> 元素。它只设置src 属性，但您可以根据需要设置其他属性。

new Vue({
  el: '#app',
  
  data () {
    return {
      text: '<h1>text</h1><div>sample text<br><action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSI3Z2lkOi8vZWxvb3AtcmljaC9BY3RpdmVTdG9yYWdlOjpCbG9iLzEzP2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36dd18a0ed30ace4bc8442849d9dd3355bc86443" content-type="image/png" url="https://vuejs.org/images/logo.png" filename="deal.png" filesize="10394" width="256" height="256" presentation="gallery"></action-text-attachment></div>'
    }
  },
  
  mounted () {
    this.updateImages()
  },
  
  updated () {
    this.updateImages()
  },
  
  methods: {
    updateImages () {
      const attachments = this.$el.querySelectorAll('action-text-attachment[content-type="image/png"]')
      
      for (const attachment of attachments) {
        const img = document.createElement('img')
        img.setAttribute('src', attachment.getAttribute('url'))
        attachment.parentNode.replaceChild(img, attachment)
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <div v-html="text"></div>
</div>

【讨论】：