CODEWITHSUNDEEP
vue.jsvue-componentvuejs3text-editorquill
breking bed
breking bed

Reputation: 175

How to display the value coming from Quill in Vuejs

I am using Quill text editor in my Vue3 application. So I have my text editor in admin panel and I am storing result in the api. So for example it is the api view:

{ description: "<p><strong><em>Description</em></strong></p>" }

So description is the value coming from quill text editor. So I want to show this in front end like this: <div>{{ product.attributes.description }}</div> but the result is like you see in the picture.

enter image description here

So how can I show this one in proper way which is bold and italic?

Upvotes: 0

Views: 1829

Answers (2)

Medvik
Medvik

Reputation: 85

Use v-HTML, and don't forget to add the ql-editor class to the element in order to display your content correctly.

<div class="preview ql-editor" v-html="description"></div>

this works well if you only display text, Let's say you want to show content with images using v-html won't display content responsively. here is how I solved it using Quil editor readOnly=true.

 <template>
  <v-container fluid>
    <div id="app">
      <div id="app">
          <div class="editor">
            <quill-editor class="editor" v-model:content="description" 
               theme="snow" toolbar="full" ></quill-editor>
          </div>
      </div>
    </div>

    <div class="preview">
      <quill-editor v-model:content="description" :options="options"/>
    </div>
</v-container>
</template>
<script>
export default {
  data() {
    return {
      description:'',
      options: {
        debug: 'info',
        modules: {
          toolbar: null
        },
        readOnly: true,
        theme: 'bubble'
      }
    }
  },
}
</script>

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

You can use v-html directive:

const app = Vue.createApp({
  el: "#demo",
  data() {
    return {
      description: "<p><strong><em>Description</em></strong></p>" 
    }
  }
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3"></script>
<div id="demo">
  <div v-html="description"></div>
</div>

Upvotes: 2

Related Questions