vue-quill

发布时间 2023-12-21 21:10:11作者: Terry841119
官网:
https://vueup.github.io/vue-quill/
引入vue-quill
当前版本:
"@vueup/vue-quill": "^1.2.0"
npm install @vueup/vue-quill@latest
全局设置
import { QuillEditor } from '@vueup/vue-quill';
const app = createApp(App);
app.component('QuillEditor', QuillEditor) app.mount('#app');
页面使用
<template>
        <QuillEditor id="sendText" 
        v-model:content="content" 
        content-type="html" 
        theme="snow" 
        :toolbar="toolbar"
        class="textarea" 
        ref="text" 
        @keydown.enter.exact="sendMessage"
        @keydown.ctrl.enter="newline" 
        @focus="onFocus"
        @click="showEmoji = false"/>
</template>
<script setup lang="ts">
    import { defineComponent, onMounted, ref, toRefs, watch, computed } from 'vue'
    import { QuillEditor, Delta } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css';
    import '@vueup/vue-quill/dist/vue-quill.bubble.css';
    const content = ref('');
</script>
 
效果显示
 
0