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>:

<!-- Thẻ CSRF cho JS upload -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CKEditor Script -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>
<!-- Script khởi tạo riêng -->
<script src="{{ asset('js/ckeditor-init.js') }}"></script>

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

Ở routes/web.php:

Route::post('/admin/posts/upload', [PostController::class, 'upload'])->name('posts.upload');

Trong PostController:

public function upload(Request $request)
{
    if ($request->hasFile('upload')) {
        $file = $request->file('upload');
        $filename = time().'_'.$file->getClientOriginalName();
        $path = $file->storeAs('public/uploads', $filename);
        $url = Storage::url($path);
        return response()->json(['url' => $url]);
    }
    return response()->json(['error' => 'No file uploaded.'], 400);
}
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?