Как отобразить форматированный текст в vue.js? - PullRequest
Новая
       27

Как отобразить форматированный текст в vue.js?

0 голосов
/ 11 октября 2019

Я создаю веб-приложение и пытаюсь отобразить загруженный форматированный текст с помощью 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>

Затем тексты отображаются правильно, но изображения не отображаются. Как я могу решить это?

1 Ответ

0 голосов
/ 11 октября 2019

Я не знаком с форматом расширенного текста, созданным в 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>
...