Gộp toàn bộ phần khởi tạo CKEditor và xử lý ảnh vào 1 file JS riêng

✅ Bước 1: Tạo file JS

Tạo file tại: public/js/ckeditor-init.js

💡 Nội dung ckeditor-init.js:

function MyUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader);
    };
}

class MyUploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }

    upload() {
        return this.loader.file.then(file => {
            return new Promise((resolve, reject) => {
                const formData = new FormData();
                formData.append('upload', file);

                fetch('/admin/posts/upload', { // Hoặc route bạn đã định nghĩa
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    if (data.url) {
                        resolve({ default: data.url });
                    } else {
                        reject(data.error || 'Upload failed');
                    }
                })
                .catch(reject);
            });
        });
    }

    abort() {}
}

function initCKEditors() {
    if (typeof ClassicEditor === 'undefined') {
        console.error('ClassicEditor is not defined. Make sure CKEditor script is loaded.');
        return;
    }

    document.querySelectorAll('.tinymce').forEach(el => {
        ClassicEditor.create(el, {
            extraPlugins: [MyUploadAdapterPlugin],
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', '|',
                    'link', 'bulletedList', 'numberedList', '|',
                    'blockQuote', 'undo', 'redo', '|',
                    'imageUpload'
                ]
            }
        }).catch(error => {
            console.error('CKEditor error:', error);
        });
    });
}

// Gọi sau khi DOM sẵn sàng
document.addEventListener('DOMContentLoaded', initCKEditors);

✅ Bước 2: Gọi file JS trong Blade

Trong Blade view/layout (layouts/app.blade.php, admin/posts/create.blade.php hoặc layout bạn đang dùng), bạn cần gọi 2 file:

✅ Chèn trong <head> hoặc trước </body>:

✅ Bước 3: Đảm bảo route upload hoạt động

Ở routes/web.php:

Trong PostController:

PreviousTạo trang có thể tùy biến các trường dễ dàng để tạo api cho trang full (ok)Nextxử lý cả 2 trường hợp: chọn ảnh từ URL và upload file thật (ok)

Last updated

Was this helpful?