在Vue3中,集成VueQuill Rich Text Editor for Vue 3

官网地址:https://vueup.github.io/vue-quill/

github:https://github.com/vueup/vue-quill

没有中文包,胜在简单,

步骤,按官网说明安装:

npm install @vueup/vue-quill@latest --save
# OR
yarn add @vueup/vue-quill@latest

在项目的\src\components\ 路径下建立 QuillEditor.vue组件,当然,名字随意取,内容如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<template>     <div class="editor-box">         <QuillEditor content-type='html' v-model:content="content" :options='editorOption' />     </div> </template> <script setup lang="ts"> import { reactive, ref, watchEffect } from 'vue'; import { QuillEditor } from '@vueup/vue-quill'; import '@vueup/vue-quill/dist/vue-quill.snow.css';   const props = defineProps({     // 默认值     value: {         type: String,         default: '',     }, });   const emit = defineEmits(['update:value']);   const content = ref(props.value); const editorOption = reactive({     modules: {         toolbar: [  // 工具栏配置             [{ 'color': [] },'bold', 'italic', 'underline', 'strike'],  // 粗体、斜体、下划线、删除线             [{ 'header': 1 }, { 'header': 2 }],  // 标题1和标题2             [{ 'list': 'ordered' }, { 'list': 'bullet' }],  // 有序列表和无序列表             [{ 'script': 'sub' }, { 'script': 'super' }],  // 上标和下标             [{ 'indent': '-1' }, { 'indent': '+1' }],  // 缩进             [{ 'direction': 'rtl' }],  // 文字方向             [{ 'size': ['small', false, 'large', 'huge'] }],  // 字号             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  // 标题等级             [{ 'color': [] }, { 'background': [] }],  // 字体颜色和背景色             [{ 'font': [] }],  // 字体             [{ 'align': [] }],  // 对齐方式             ['clean']  // 清除格式         ]     },     placeholder: '请输入内容...',     theme: 'snow' }, ); // 内容有变化，就更新内容，将值返回给父组件 watchEffect(() => {     emit('update:value', content.value); }); </script>

　在父组件中使用

<script setup lang="ts">
import QuillEditor from '../../components/QuillEditor.vue';
</script>
<template>
<QuillEditor v-model:value="item.content" />
</template>

已测试通过,引用的路径根据自已的项目情况自行更改

---

 

关于浏览器警告

[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated () and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

vue-quill使用的是quill.js 1.3.7版本,存在这个警告,但作者目前又没有更新,可以使用以下的方式,强制使用quill.js2.0.2版本

更新你的 package.json,增加


 "pnpm": {
    "overrides": {
      "quill": "2.0.2"
    }
  }

清理 pnpm 缓存：

pnpm store prune
删除 node_modules 和 pnpm-lock.yaml：

rm -rf node_modules pnpm-lock.yaml
重新安装所有依赖：

pnpm install

然后刷新页面,发现警告消失了