如何显示来自Vuejs中Quill的值

发布于 2025-01-30 05:19:18 字数 550 浏览 6 评论 0原文

我在VUE3应用程序中使用Quill Text Editor。因此，我将文本编辑器放在管理面板中，并且在API中存储了结果。因此，例如，它是API视图：

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

因此描述是来自Quill Text Editor的值。因此，我想这样的前端显示此信息：＆lt; div＆gt; {{product.attributes.description}}}＆lt;/div＆gt;，但结果就像您在图片中看到的结果一样。

那么，我该如何以适当的方式显示出大胆和斜体的正确方式？

原文

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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

胡大本事 2025-02-06 05:19:18

您可以使用V-HTML指令：

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>

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>

回复收藏 0 原文

花想c 2025-02-06 05:19:18

使用V-HTML，不要忘记将QL-编辑器类添加到元素中以正确显示您的内容。

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

如果您只显示文本，则可以很好地奏效，假设您想使用V-HTML显示图像的内容不会响应地显示内容。这是我使用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>

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>

回复收藏 0 原文

~没有更多了~