时间戳

首页 > 解决方案 > 如何在 vue.js 中显示富文本内容？

javascript - 如何在 vue.js 中显示富文本内容？

问题描述

我正在创建一个 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>

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

标签： javascripthtmlvue.jsactiontext

解决方案

我不熟悉 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>

推荐阅读