CODEWITHSUNDEEP
javascripthtmlvue.jsckeditornuxt.js
Sb Zakaria
Sb Zakaria

Reputation: 369

Convert ckeditor Data to html

I'm building a vue app where user input data that I store in mongo database. One of the form elements is a ckeditor. When the user inputs data everything works fine.
Now the problem is when I make an API call to get the ckeditor text that user did input, I receive plein string text that I can't convert to html element.

Here's my code

<script>
export default {
  data() {
    return {
      courrierId: this.$route.params.detail,
      courrier: '',
    }
  },
  // i receive the full courrier object without a problem
  async created() {
    const courrier = await axios
      .post(`${baseUrl}getCourrierDetails/${this.courrierId}`)
      .then((response) => {
        this.courrier = response.data[0]
        console.log(response.data)
        return response.data
      })
      .catch((error) => ({ error: JSON.stringify(error) }))
  },
}
</script>

Here's the courrier object I do receive from the DB

enter image description here

What I want to do, is to display the data in the frontend. Everything works fine except for the Text. Here's the code

<div class="text-muted">
 <h5 class="font-size-16 mb-3">Pour</h5>
  <p class="mb-1">
    Nom : <strong>{{ this.courrier.Nom }}</strong>
  </p>
  <p class="mb-1">
    Prénom : <strong>{{ this.courrier.Prénom }}</strong>
  </p>
  <p class="mb-1">
    Alger le : <strong>{{ this.courrier.Date }}</strong>
  </p>
  <p class="mb-1">
    Age : <strong>{{ this.courrier.Age }}</strong>
  </p>
</div>

<h5 class="text-center">
  {{ this.courrier.Type }}
</h5>
{{ this.courrier.Text}}  <!-- this is where the problem reside -->
<div class="d-print-none mt-4">
 <div class="float-end">
     <a href="javascript:window.print()" class="btn btn-success waves-effect waves-light mr-1">
      <i class="fa fa-print"></i>
     </a>
     <a href="#" class="btn btn-primary w-md waves-effect waves-light">
      Send
    </a>
  </div>
</div>

Here's the output enter image description here

Upvotes: 1

Views: 1823

Answers (1)

mac thiem
mac thiem

Reputation: 86

You can use the v-html directive to output real HTML:

<span v-html="this.courrier.Text"></span>

But, It's really not safe. you should refer to vue's documentation at https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Upvotes: 1

Related Questions