hldrCenter/management/src/views/news/QuillEditor.vue

<template>
  <div class="editor-wrapper">
    <!-- 富文本编辑器 -->
    <div ref="editor" class="quill-container"></div>
    <!-- 新增：打印内容按钮 -->
    <button 
      class="print-content-btn" 
      @click="printEditorContent"
    >
      打印当前编辑器内容到控制台
    </button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

// 编辑器容器引用
const editor = ref<HTMLDivElement | null>(null);
let quillInstance: Quill | null = null;

// 组件挂载后初始化 Quill
onMounted(() => {
  if (editor.value) {
    // 1. 初始化 Quill 编辑器
    quillInstance = new Quill(editor.value, {
      theme: 'snow', // 使用带工具栏的主题
      modules: {
        toolbar: {
          container: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['link', 'image', 'video'], // 图片、视频按钮
            ['clean']
          ],
          handlers: {
            image: handleClickUpload // 点击工具栏「图片」按钮时触发上传本地图片
          }
        }
      },
      placeholder: '请上传或粘贴图片...',
    });

    // 2. 监听文本变化，用于处理粘贴图片（自动提取 base64 并上传）
    quillInstance.on('text-change', (delta, oldDelta, source) => {
  if (source === 'user') {
    const pastedBase64 = getPastedBase64Image(delta);
    if (pastedBase64) {
      const selection = quillInstance?.getSelection();
      if (!selection) return;

      // 🔍 打印关键调试信息
      console.log('🔍 text-change 原始 delta.ops:', delta.ops);
      console.log('🔍 source:', source);
      console.log('🔍 当前 selection:', selection);
      console.log('🔍 当前光标位置（selection.index）:', selection.index);
      console.log('🔍 推测的 base64 图片位置（imageIndex = selection.index - 1）:', selection.index - 1);

      const imageIndex = selection.index ;

      // 1. 删除 base64 图片
      quillInstance?.deleteText(imageIndex, 1);

      // 2. 转 base64 为 File 并上传
      const blob = base64ToBlob(pastedBase64);
      if (blob) {
        const file = new File([blob], `pasted-${Date.now()}.png`, { type: blob.type });
        uploadImageToServer(file, imageIndex);
      }
    }
  }
});
  }
});

/**
 * 点击工具栏「图片」按钮时触发：选择本地图片并上传
 */
function handleClickUpload() {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = 'image/*';

  fileInput.onchange = () => {
    if (!fileInput.files || !fileInput.files[0]) return;
    const selectedFile = fileInput.files[0];

    const selection = quillInstance?.getSelection();
    const insertIndex = selection ? selection.index : quillInstance?.getLength() || 0;

    // 调用统一上传函数
    uploadImageToServer(selectedFile, insertIndex);

    // 清空 input，避免重复选择同一文件不触发 onchange
    fileInput.value = '';
  };

  fileInput.click();
}

/**
 * 统一图片上传函数：上传 File 到你的后端接口，插入返回的真实图片 URL
 * @param file 用户上传的图片文件（本地选择 or 粘贴转成 File）
 * @param insertIndex 图片要插入到编辑器的位置
 */
async function uploadImageToServer(file: File, insertIndex: number) {
  if (!quillInstance) return;

  // 1. 插入「上传中」占位文本
  quillInstance.insertText(insertIndex, '[图片上传中...]', { color: '#666', italic: true });

  try {
    // 2. 构造 FormData，用于上传文件
    const formData = new FormData();
    formData.append('image', file); // ⬅️ 'image' 字段名请根据你的后端接口调整！

    // 3. 调用你的真实后端图片上传接口（请替换为你的真实地址！）
    const UPLOAD_API_URL = 'http://localhost:8080/api/upload/image'; // ⬅️ 一定要替换成你自己的上传接口！！

    const response = await fetch(UPLOAD_API_URL, {
      method: 'POST',
      body: formData,
      // 注意：不要手动设置 Content-Type，浏览器会自动生成 multipart/form-data + boundary
    });

    if (!response.ok) {
      throw new Error(`图片上传失败，HTTP 状态码：${response.status}`);
    }

    // 4. 解析返回的 JSON，获取图片 URL（重要！根据你的后端返回字段名调整！！）
    const result = await response.json();

    // ⬅️ 下面这行是关键！根据你后端返回的数据结构修改，比如：
    // - { url: 'https://xxx.com/img.png' } → 取 result.url
    // - { success: true, data: { imageUrl: '...' } } → 取 result.data.imageUrl
    // - { data: { url: '...' } } → 取 result.data.url
    const imageUrl = result.data?.url; // ✅ 请根据实际返回字段修改！！！

    if (!imageUrl) {
      throw new Error('服务器未返回有效的图片 URL');
    }

    // 5. 删除「上传中」占位文本
    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);

    // 6. 插入真实的图片 URL（不是 base64！）
    quillInstance.insertEmbed(insertIndex, 'image', imageUrl);

    // 7. 光标移动到图片后面
    quillInstance.setSelection(insertIndex + 1);

  } catch (error) {
    console.error('图片上传失败：', error);
    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
    quillInstance.insertText(insertIndex, '[图片上传失败，请重试]', { color: '#ff4444', italic: true });
  }
}

/**
 * 打印当前编辑器内容（HTML + 纯文本）到控制台（调试用）
 */
function printEditorContent() {
  if (!quillInstance) {
    console.warn('编辑器未初始化，无法获取内容');
    return;
  }

  const htmlContent = quillInstance.root.innerHTML;
  const plainText = quillInstance.getText();

  console.log('=== 编辑器 HTML 内容 ===');
  console.log(htmlContent);
  console.log('\n=== 编辑器纯文本内容 ===');
  console.log(plainText);
}

/**
 * 从 Delta 操作中提取粘贴的 base64 图片
 */
function getPastedBase64Image(delta: any): string | null {
  for (const op of delta.ops) {
    if (op.insert && typeof op.insert === 'object' && op.insert.image && op.insert.image.startsWith('data:image')) {
      return op.insert.image;
    }
  }
  return null;
}

/**
 * 将 base64 图片字符串转为 Blob 对象
 */
function base64ToBlob(base64: string): Blob | null {
  try {
    const [prefix, data] = base64.split(',');
    if (!prefix || !data) throw new Error('base64 格式错误');

    const mimeMatch = prefix.match(/data:(.*?);/);
    if (!mimeMatch) throw new Error('无法解析 MIME 类型');
    const mime = mimeMatch[1];

    const binaryData = atob(data);
    const bytes = new Uint8Array(binaryData.length);
    for (let i = 0; i < binaryData.length; i++) {
      bytes[i] = binaryData.charCodeAt(i);
    }

    return new Blob([bytes], { type: mime });
  } catch (error) {
    console.error('base64 转 Blob 失败：', error);
    return null;
  }
}
</script>

<style scoped>
/* 外层容器：控制编辑器和按钮的布局 */
.editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 编辑器和按钮之间的间距 */
  max-width: 800px; /* 限制最大宽度，避免编辑器过宽 */
  margin: 20px auto; /* 水平居中 */
  padding: 0 20px;
}

.quill-container {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden; /* 避免工具栏边框与容器重叠 */
}

/* 调整编辑器最小高度和图片显示 */
::v-deep .ql-editor {
  min-height: 300px;
}
::v-deep .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

/* 打印按钮样式 */
.print-content-btn {
  padding: 8px 16px;
  background-color: #4096ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  width: fit-content; /* 按钮宽度适应内容 */
}

.print-content-btn:disabled {
  background-color: #c9c9c9;
  cursor: not-allowed;
  color: #666;
}

.print-content-btn:hover:not(:disabled) {
  background-color: #3086e8;
}
</style>