Question

我正在创建一个Web应用程序，并尝试使用vue.js显示上载的RTF内容。富文本内容由操作文本创建，其格式如下所示。

<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>

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

Answer 1

我对Action Text创建的RTF格式不熟悉，因此无法评论将其与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>

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

1 个答案: