Tích hợp CKFinder vào ứng dụng Angular
Sản phẩm mình đang làm cần có chức năng cho phép người dùng chọn lại các ảnh mà họ đã upload lên hệ thống. Hiện tại thì có 2 cách để nhập liệu trên hệ thống:
- Bằng trình soạn thảo (Wysiwyg editor)
- Bằng trình kéo thả (Drag & drop component editor)
Do hệ thống đang dùng sẵn CKEditor rồi nên mình nghĩ tích hợp luôn 1 file browser của CKEditor là giải pháp hợp lý nhất vì vừa đảm bảo giao diện thống nhất, vừa đảm bảo code đã được test kỹ càng 🙂
Và cái tên được chọn dĩ nhiên là CKFinder rồi 😆
Nói qua 1 chút thì hệ thống mình đang chạy được chia làm 2 thành phần chính:
- Frontend: chạy Angular
- Backend: chạy Laravel
Việc tích hợp CKEditor trên Angular thì rất đơn giản rồi, ngay chính trên tài liệu hướng dẫn của CKEditor cũng đề cập đến việc tích hợp này. Tuy nhiên, để CKFinder hoạt động được thì nó phải được cài ở phía backend (để còn xử lý, thao tác với các file trên server nữa). Hiện tại thì CKFinder chỉ hỗ trợ mấy ngôn ngữ như PHP, Java, ASP, ASP.NET, ColdFusion.
Vấn đề phát sinh từ đây! 😨
Theo tài liệu CKeditor viết thì thuộc tính filebrowserImageBrowseUrl dùng để chỉ định đến đường dẫn của phần mềm quản lý file, và nhọ 1 chỗ là nó không hỗ trợ nếu phần mềm quản lý file đó khác domain mà CKEditor đang chạy (có vẻ như CKEditor cũng không quan tâm lắm đến việc chạy cross domain kiểu này)
Để giải quyết điều này thì đường dẫn của filebrowserImageBrowseUrl buộc phải cùng server frontend. File ckfinder.html của mình có dạng như sau:
Chỗ này thì không có gì cao siêu cả ngoài mấy điểm:
- Sử dụng variable cho connectorPath: lý do là hệ thống của mình có khác nhiều môi trường (dev, staging, production). Cho nên mình đặt thêm cái
{BACKEND_API_URL}để khi build frontend nó sẽ tự động tìm & thay thế bằng đường dẫn đến backend của môi trường tương ứng (bạn nào cần script build & replace này thì để lại comment nha) - Nhồi thêm token khi call sang CKFinder ở backend: tất cả cả request mình đều để middleware để check login cả cho nên cần thêm cái token này thì mới request được 😎
OK rồi, và khi bấm vào biểu tượng Picture ở editor thì popup sẽ hiển thị thêm nút Duyệt máy chủ (Browse, tuỳ vào ngôn ngữ mà bạn thiết lập)
Thử click vào nút Duyệt máy chủ thôi!
Ten ten ten tèn!!! Các file trên server đã hiển thị đầy đủ (à, chỗ này mình config chỉ hiển thị các file là ảnh thôi nhé, cái chỗ ?type=Images ấy)
Còn ngại ngần gì mà không click chọn em gái xinh đẹp kia nhỉ (Melissa Benoist - em này có mấy ảnh bị leak từ iCloud ra hot vãi 😝)
Tada! Đã hiển thị full đường dẫn đến file ảnh luôn, giờ chỉ cần set các thuộc tính hình ảnh nếu cần rồi bấm Đồng ý là ảnh của bạn đã được chèn vào editor thành công rồi đó!
Lưu ý:
- CKFinder là 1 plugin bổ sung thêm cho việc quản lý file & tải file của CKEditor.
- Nếu bạn sử dụng bản CKEditor miễn phí, bạn cần trả thêm $10 nữa thì mới sử dụng được mọi tính năng của CKFinder, nếu không sẽ có vài tính năng bị khoá, ví dụ như xoá file chẳng hạn 🧐
- Nhưng mà đâu đó trên internet thì người ta cũng chia sẻ khá nhiều tool để generate license key, các bạn có thể lấy xài tạm nếu điều kiện kinh tế không cho phép 🤣