vueQuill(富文本编辑器)

yarn add @vueup/vue-quill

 <QuillEditor
    ref="quillDom"
    v-model:content="ruleForm.desc"
    :options="custOptions"
    content-type="html"
    :style="{ height: '400px', width: '615px' }"
  />

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

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

const checkImgType = (file: File) => {
  if (/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
    return true;
  }
  return false;
};

const overrideHandlers = {
  image: function image() {
    const self = this as any;
    if (props.uploadImgFn) {
      // 对image 进行处理
      let fileInput = self.container.querySelector('input.ql-image[type=file]');
      if (fileInput === null) {
        fileInput = document.createElement('input');
        fileInput.setAttribute('type', 'file');
        fileInput.classList.add('ql-image');
        // 监听选择文件
        fileInput.addEventListener('change', function () {
          if (checkImgType(fileInput.files[0])) {
            // 调用接口进行图片上传(使用传入的fn参数)
            props.uploadImgFn(fileInput.files[0], function (imguri: any) {
              if (imguri) {
                const length = self.quill.getSelection(true).index;
                // 这里很重要，你图片上传成功后，img的src需要在这里添加，res.path就是你服务器返回的图片链接。
                self.quill.insertEmbed(length, 'image', imguri);
                self.quill.setSelection(length + 1);
              }
              fileInput.value = '';
            });
          } else {
            Message.error('只能上传图片！');
          }
        });
        self.container.appendChild(fileInput);
      }
      fileInput.click();
    }
  },
};
// Please reference https://vueup.github.io/vue-quill/guide/options.html#option-attributes
const custOptions = {
  debug: false, // 'error', 'warn', 'log', or 'info' | boolean(true,false)
  modules: {
    toolbar: {
      container: toolbarOptions,
      handlers: overrideHandlers, // 事件重写 Please reference https://www.cnblogs.com/shuihanxiao/p/11081035.html
    },
  },
  placeholder: `${t('offers.form.desc')}...`,
  theme: 'snow',
  // ...props.resetOptions,
};