首先引入，quill-editor官网地址为 https://quilljs.com/

npm install @vueup/vue-quill --save

在main.js 中全局组件式导入

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

instance = createApp(App);
instance.component('QuillEditor', QuillEditor)

组件内直接使用

<template>

<a-form
 ref="editFormRef"
 :rules="editFormRules"
 :model="editForm"
>

<a-form-item 
 label="详情介绍" 
 name="introduce"
 :rules="[{ required: true, 
 validator: validateIntroduce, trigger: 'blur' 
 }]">

 <a-input ref="introduceInput" v-show="false" v-model:value="editForm.introduce" />

 <quill-editor
  :key="type"
  ref="quillEditorRef"
  content-type='html'
  :content="editForm.introduce"
  :options="type == 'pre'?editorOptionReadOnly:editorOption"
  @text-change="editorChange"
  @blur="editorBlur"
  />
  
</a-form-item>

</a-form>

</template>

<script setup lang="jsx">

const type = ref('')

const introduceInput = ref(null)

const modules = {
  toolbar: {
      container:[
      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
      [{ align: [] }], // 对齐方式
      [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
      [{ font: [] }], // 字体种类
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
      [{ direction: 'ltl' }], // 文本方向
      [{ direction: 'rtl' }], // 文本方向
      [{ indent: '-1' }, { indent: '+1' }], // 缩进
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
      [{ script: 'sub' }, { script: 'super' }], // 上标/下标
      ['blockquote', 'code-block'], // 引用  代码块
      ['clean'], // 清除文本格式
      ['link', 'image', 'video'], // 链接、图片、视频
    ]
    }
}

const editorOptionReadOnly = {
  readOnly: true,
  modules
}

const editorOption = {
  readOnly: false,
  modules
}
</script>

关于readOnly 失效问题：

说明一下，当从详情进入的时候，富文本框只做内容展示，不可编辑，但readOnly属性在options里，而options不支持运行时更新，只能用vue更新组件的方式，给<quill-editor/>绑定一个key（随便叫什么），更新这个属性key，迫使组件刷新。

我已经尝试过在nextTick和setTimeout里更新options.readOnly，哪怕将options写成reactive都无效，以及在onMounted周期内使用<quill-editor/>组件自带的enable方法，均告失败。

onMounted(() => {
  type.value = route.query.type
  // 这样也是无效的
  quillEditorRef.value.enable(type.value == 'detail'? false : true)
}

如果富文本框的内容是必填项，想在失焦的时候就校验，可以写一个隐藏的input（v-show="false")，将form对应的属性也绑定到该input

<a-input ref="introduceInput" v-show="false" v-model:value="editForm.introduce" />

然后当 <quill-editor/>发生@text-change，就将值赋给该隐藏的input。

const introduceInput = ref(null)

const editorChange = (val,val2) => {
  introduceInput.value = editForm.value.introduce = quillEditorRef.value.getContents()
}

const editorBlur = (val) => {
  editFormRef.value.validateFields('introduce')
}

自定义校验函数如下

const validateIntroduce = async (rule, value) => {
  if(value == '<p><br></p>'){
    return Promise.reject('请输入活动详情介绍');
  }else{
    return Promise.resolve();
  }
};