如何实现编辑器插入PDF功能，前台实现翻页呢？

{ custom: () => this.insertPDF(), icon: '📄', title: '插入PDF' }

insertPDF() {
    const choice = confirm('点击"确定"上传本地PDF，点击"取消"输入PDF链接');
    if (choice) {
        this.uploadLocalPDF();
    } else {
        this.embedPDFUrl();
    }
}

uploadLocalPDF() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'application/pdf';
    input.onchange = async () => {
        const file = input.files[0];
        if (!file) return;
        const placeholder = `📄 PDF上传中: ${file.name}...`;
        document.execCommand('insertText', false, placeholder);
        const formData = new FormData();
        formData.append('attachment', file);
        // 使用附件上传接口，但限制 PDF 类型（您可能需要单独的上传接口或修改现有接口）
        // 这里假设 /admin/upload_attachment.php 支持 PDF
        const res = await fetch(this.attachmentUploadUrl, { method: 'POST', body: formData });
        const data = await res.json();
        if (data.url) {
            const pdfHtml = `<div class="pdf-viewer" data-pdf="${data.url}" style="margin:10px 0; border:1px solid #ddd; padding:10px; background:#f9f9f9; text-align:center;">📄 PDF文件: <a href="${data.url}" target="_blank">${file.name}</a> <span style="color:#1abc9c;">(点击右侧按钮可在线预览)</span></div>`;
            this.editorDiv.innerHTML = this.editorDiv.innerHTML.replace(placeholder, pdfHtml);
        } else {
            alert('上传失败：' + (data.error || '未知错误'));
            this.editorDiv.innerHTML = this.editorDiv.innerHTML.replace(placeholder, '');
        }
        this.syncToTextarea();
    };
    input.click();
}

embedPDFUrl() {
    const url = prompt('请输入PDF文件链接（URL）:', 'https://');
    if (!url) return;
    const pdfHtml = `<div class="pdf-viewer" data-pdf="${this.escapeHtml(url)}" style="margin:10px 0; border:1px solid #ddd; padding:10px; background:#f9f9f9; text-align:center;">📄 PDF文件: <a href="${this.escapeHtml(url)}" target="_blank">点击下载</a> <span style="color:#1abc9c;">(加载中...)</span></div>`;
    document.execCommand('insertHTML', false, pdfHtml);
    this.syncToTextarea();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
    // 设置 worker
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
    
    // 为所有 .pdf-viewer 元素渲染 PDF 预览
    document.querySelectorAll('.pdf-viewer').forEach(container => {
        const pdfUrl = container.getAttribute('data-pdf');
        if (!pdfUrl) return;
        
        // 创建画布和翻页按钮
        container.innerHTML = ''; // 清空原有内容
        container.style.cssText = 'position:relative; background:#f0f0f0; border:1px solid #ccc; border-radius:8px; padding:10px; text-align:center;';
        
        const canvas = document.createElement('canvas');
        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto';
        container.appendChild(canvas);
        
        const controls = document.createElement('div');
        controls.style.marginTop = '10px';
        controls.innerHTML = `
            <button class="pdf-prev" disabled>◀ 上一页</button>
            <span class="pdf-page-info">第 0 / 0 页</span>
            <button class="pdf-next" disabled>下一页 ▶</button>
            <button class="pdf-download">⬇️ 下载</button>
        `;
        container.appendChild(controls);
        
        let pdfDoc = null;
        let currentPage = 1;
        let totalPages = 0;
        
        const renderPage = (num) => {
            pdfDoc.getPage(num).then(page => {
                const viewport = page.getViewport({ scale: 1.5 });
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                const ctx = canvas.getContext('2d');
                page.render({ canvasContext: ctx, viewport: viewport });
                controls.querySelector('.pdf-page-info').innerText = `第 ${num} / ${totalPages} 页`;
                controls.querySelector('.pdf-prev').disabled = (num === 1);
                controls.querySelector('.pdf-next').disabled = (num === totalPages);
            });
        };
        
        pdfjsLib.getDocument(pdfUrl).promise.then(doc => {
            pdfDoc = doc;
            totalPages = doc.numPages;
            renderPage(1);
        }).catch(err => {
            container.innerHTML = `<div style="color:red;">PDF加载失败: ${err.message}</div>`;
        });
        
        controls.querySelector('.pdf-prev').onclick = () => {
            if (currentPage > 1) renderPage(--currentPage);
        };
        controls.querySelector('.pdf-next').onclick = () => {
            if (currentPage < totalPages) renderPage(++currentPage);
        };
        controls.querySelector('.pdf-download').onclick = () => {
            window.open(pdfUrl, '_blank');
        };
    });
</script>