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

Question

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

然后，可以正常显示文字，但不显示图片。我该如何解决？

Answer 1

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

一种方法是在插入文本之前对其进行操作。如果 Action Text 格式非常可预测，那么使用 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 中显示富文本内容？

How can I display rich text content in vue.js?

html

javascript

vue.js

actiontext