vue3 富文本quill-优快云博客

文章介绍了如何在Vue项目中安装并使用vue-quill组件，包括配置选项、子组件引入方法，以及如何通过定时器实现内容变化的延迟处理，以避免频繁操作。

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

安装

npm install @vueup/vue-quill@latest --save

子组件引入使用

<template>
    <QuillEditor ref="QuillEditorRef" :options="options" :content="textarea" content-type="html"
        @update:content="textChange" />
</template>
<script setup>
import {
    QuillEditor
} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { getCurrentInstance, onMounted, onUnmounted, ref, defineEmits } from "vue";
const options = ref({

    debug: 'info',
    modules: {
        // toolbar: ['bold', 'italic', 'underline'],
    },
    placeholder: '请输入需要的内容',
    readOnly: false,
    theme: 'snow',
}
)
const Emits = defineEmits()
const textarea = ref()
const timer = ref()
const textChange = (e) => {
    if (timer.value) {
        clearTimeout(timer.value)
    } // 每次进来的时候都将之前的清除掉，如果还没到 600毫秒(600毫秒自定义) 的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过 600豪秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
    timer.value = setTimeout(() => { //箭头函数 注意this
        // 在这里进行我们的操作  这样就不会频繁的进行我们这里面的操作了
        var value = e;
        var detail = {
            "value": value
        };
        var options = {};
        textarea.value = e
        // console.log(e, '参数98', textarea.value);
        Emits("changeEmits", textarea.value)
    }, 600)

}

</script>

父组件引用子组件

<template>
  <div class="home">
    <QuillEditor @change="(html) => { html为更新值 }" 
  		:html="默认值" @changeEmits="changeEmits"></QuillEditor>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, onUnmounted, ref } from "vue";
import QuillEditor from "../../components/QuillEditor/QuillEditor.vue"
const changeEmits= (e)=>{
  console.log("changeEmits",e)
}
</script>