富文本编辑器：quill-editor VUE3

最最基本的使用

csharp 复制代码

npm i @vueup/vue-quill

html 复制代码

show 这个是刷新显示
<quill v-model:content="txData.context" :visible="txData.show" :lookt-type="lookType" />

这里包含上传图片接口

html 复制代码

<template>
  <div>
    <!-- Quill 编辑器 -->
    <QuillEditor
        :key="index"
        v-model:content="localContent"
        :options="options"
        content-type="html"
        style="height: 300px; width: 100%"
        ref="quillEditor"
    />

  </div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {nextTick, onMounted, reactive, ref, watch} from "vue";
import {fileUploadSingles} from "@/api/system";
import getFileUrl from "@/hooks/getFileUrl";

const props = defineProps({
  content: {
    type: String,
    default: () => '',
  },
  visible: {
    type: Boolean,
    required: true,
  },
  looktType: {
    type: String,
    default: () => '',
  }
})

const index = ref(0)
const localContent = ref('')  // 内容
// 配置
const options = reactive({
  theme: 'snow',  // 主题
  readOnly: props.looktType === 'info', // 只读
  placeholder: props.looktType === 'info' ? '' : '请输入内容...',
  modules: {
    // 工具栏配置 https://quilljs.com/docs/formats
    toolbar: [
      [{ header: [1, 2, 3, 4, 5, false] }],
      [{ font: [] }],
      [{ color: [] }, { background: [] }],
      [{ align: [] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ direction: 'rtl' }],
      ['blockquote', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
      [{ script: 'sub' }, { script: 'super' }],
      ['image']
    ],
  }
})

const quillEditor = ref(null)

// 上传图片接口函数
const uploadImage = async (file) => {
  if (props.looktType === 'info') {
    return null
  }
  const formData = new FormData()
  formData.append('file', file)
  formData.append('type', 'inspectionSysAnnouncementFile')

  try {
  // 这里上传图片接口
    const res = await fileUploadSingles(formData)
    // 假设接口返回 { url: '图片访问地址' }
    return res.data.name
  } catch (err) {
    console.error('上传失败', err)
    return null
  }
}

const emits = defineEmits(['update:content']);
watch(localContent, (newValue) => {
  emits('update:content', newValue);
});
watch(
    () => props.visible,
    (val) => {
      if (val) {
        nextTick(() => {
          index.value+=1 // 强刷新
          localContent.value = props.content || null
          const quill = quillEditor.value?.getQuill()
          if (quill && props.looktType === 'info') {
            quill.disable() // 禁用
          } else {
            quill.enable() // 启用编辑
          }
        })
      } else {
        localContent.value = ''
      }
    }
);

onMounted(() => {
  const quill = quillEditor.value?.getQuill()
  if (!quill) return

  const toolbar = quill.getModule('toolbar')
  toolbar.addHandler('image', () => {
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.click()

    input.onchange = async () => {
      const file = input.files[0]
      if (!file) return
      // 上传到接口
      const imageUrl = await uploadImage(file)
      if (imageUrl) {
        const range = quill.getSelection(true)
        quill.insertEmbed(range.index, 'image', await getFileUrl(imageUrl)) // 图片的回显半路经转
        quill.setSelection(range.index + 1)
      }
    }
  })
})

</script>

<style scoped>
/* 可根据需要自定义样式 */
.ql-editor img {
  max-width: 100%;
  cursor: pointer;
  resize: both;
  overflow: hidden;
}
</style>