使用vue-quill展示富文本内容

原创已于 2022-11-10 17:40:24 修改 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-10 17:39:14 首次发布

前端专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了在Vue中遇到复杂文本内容渲染问题时，如何利用vue-quill编辑器进行解决。通过引入vue-quill库，实现原生编辑器的功能，包括代码高亮和其他扩展。文章提供了一个封装组件的示例，展示了如何在其他页面中使用VueRichText组件来显示内容。博客还提供了具体的代码片段和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在文本内容复杂的情况下，v-html，可能满足不了我们的渲染需求，此时我们可以选用原编辑器来渲染,原汤化原食，并进行代码高亮等其他扩展

相关文章地址：vue使用vue-quill编辑器

封装组件

<template>
  <div class="editor">
    <!-- props传递有延迟,有内容再渲染-->
    <!-- 自定义toolbar 使其内容为空不显示-->
    <QuillEditor
        v-if="props.content"
        toolbar="#my-toolbar"
        v-model:content="props.content"
        :readOnly="true"
        contentType="html"/>
    <template>
      <div id="my-toolbar"></div>
    </template>
  </div>
</template>

<script setup>
import {QuillEditor, Quill} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {getCurrentInstance, ref, watch} from "vue";

const {proxy} = getCurrentInstance();
const props = defineProps({
  /* 编辑器的内容   */
  content: {
    type: String,
    default: '',
  },
})

</script>
<style>
.editor,
.ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}

</style>

在其他页面使用

<VueRichText :content="blog.content"></VueRichText>

原博发布于：inGamev