Halo博客中默认编辑器插入html或markdown或PDF

<!-- 引入 PDF.js 库 --><script src="//cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script><!-- 必须配置 Worker 否则报错 --><script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 
    "//cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.worker.min.js";
</script>

<!-- 滚动容器（关键！） --><div id="pdf-container" style="overflow-y: auto; max-height: 80vh; border: 1px solid #eee;"><!-- 所有页面 Canvas 动态插入此处 --></div>

<script>
  const pdfUrl = "/upload/02-HTML%20%E6%A0%87%E7%AD%BE%EF%BC%88%E4%B8%8A%EF%BC%89.pdf"; // 替换为 Halo 附件库的 PDF URL
  const container = document.getElementById('pdf-container');

  // 加载 PDF 并渲染所有页
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    const scale = 1.5; // 缩放比例（按需调整）
    const gap = 20; // 页间距

    // 循环渲染每一页
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      pdf.getPage(pageNum).then(page => {
        // 创建 Canvas 元素
        const canvas = document.createElement('canvas');
        canvas.className = "pdf-page";
        canvas.style.marginBottom = `${gap}px`; // 页间距
        container.appendChild(canvas);

        // 计算渲染尺寸
        const viewport = page.getViewport({ scale });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const ctx = canvas.getContext('2d');

        // 渲染图像
        page.render({
          canvasContext: ctx,
          viewport
        });

        // 添加文本层（可选，支持复制文字）
        page.getTextContent().then(textContent => {
          const textDiv = document.createElement('div');
          textDiv.className = 'text-layer';
          textDiv.style.position = 'absolute';
          textDiv.style.width = `${viewport.width}px`;
          textDiv.style.height = `${viewport.height}px`;
          container.appendChild(textDiv);
          
          pdfjsLib.renderTextLayer({
            textContent: textContent,
            container: textDiv,
            viewport: viewport
          });
        });
      });
    }
  }).catch(error => {
    console.error("PDF加载失败：", error);
    container.innerHTML = `<p style="color:red">PDF加载失败：${error.message}</p>`;
  });
</script>

<!-- 文本层基础样式 --><style>
  .text-layer {
    pointer-events: none; /* 避免遮挡 Canvas */
  }
  .text-layer > span {
    position: absolute;
    cursor: text;
    transform-origin: 0% 0%;
  }
</style>

<embed src="pdf路径" type="application/pdf" width="100%" height="600px">

<iframe 
  src="你的PDF文件URL" 
  width="100%" 
  height="600px" 
  frameborder="0"
></iframe>