如何在Vuejs中显示来自Quill的值

Answer 1

您可以使用

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>

Answer 2

使用 v-HTML，并且不要忘记将 ql-editor 类添加到元素中，以便正确显示您的内容。

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

如果您只显示文本，这很有效，假设您想使用 v-html 显示带有图像的内容，则不会响应地显示内容。这是我使用 Quil 编辑器 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>