💻 Page Config Guide

DrawPDF cho phép tùy chỉnh kích thước khổ giấy và hướng giấy linh hoạt ngay thời điểm khởi tạo.

1. Initialize Options

Các tham số cấu hình khi gọi create:

• format: Khổ giấy (a3, a4, a5, letter, legal...).
• orientation: Hướng giấy ('portrait' - dọc, 'landscape' - ngang).
• margins: Căn lề (top, right, bottom, left) đơn vị mm.

2. Code Example

Cách xử lý reload và cập nhật config an toàn:

let pdfInstance = null;

async function initEditor(config) {
    // 1. Dọn dẹp instance cũ (quan trọng!)
    if (pdfInstance) {
        await pdfInstance.destroy();
        pdfInstance = null;
    }

    // 2. Khởi tạo mới với config
    pdfInstance = await DrawPDF.create("#editor", {
        format: config.format,       // 'a4', 'letter'...
        orientation: config.orientation, // 'portrait', 'landscape'
        
        // Tùy chỉnh Toolbar gọn gàng
        toolbar: {
            items: ['heading', 'bold', 'italic', 'insertTable', 'undo', 'redo'],
            shouldNotGroupWhenFull: true
        }
    });

    // 3. Mô phỏng khổ giấy trên màn hình (Visual Feedback)
    updateEditorVisuals(config.format, config.orientation);
}

// Helper: Chỉnh CSS editor theo khổ giấy (mm => px)
function updateEditorVisuals(format, orientation) {
    const sizes = { a4: {w: 210, h: 297}, /*...*/ };
    const size = sizes[format] || sizes.a4;
    
    // Tính kích thước theo chiều xoay
    const wMm = orientation === 'landscape' ? size.h : size.w;
    const hMm = orientation === 'landscape' ? size.w : size.h;
    
    // Quy đổi 1mm ~ 3.78px và set style
    const editorEl = document.querySelector('.ck-editor__editable');
    if (editorEl) {
        editorEl.style.width = (wMm * 3.78) + 'px';
        editorEl.style.minHeight = (hMm * 3.78) + 'px';
        editorEl.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
    }
}

📄 Live Editor (Check Page Size)