Tích hợp CKFinder vào ứng dụng Angular
Khanh is a full stack web developer with over 15 years of experience developing for the web
Search for a command to run...
Khanh is a full stack web developer with over 15 years of experience developing for the web
No comments yet. Be the first to comment.
Elevate your bus reservation experience (or even movie, theater, train, ship, plane tickets) with the React Bus Seat Map Picker – a sophisticated and meticulously crafted script designed exclusively for bus seat bookings. Engineered with strict TypeS...

In previous blog, I migrated all posts from my WordPress to Hashnode at https://blog.donamkhanh.com. Now I create a simple landing page for my main domain and hosted on Github Page. You can access at https://donamkhanh.com. In feature, I'm going to h...

I just finished migrating my blog from Wordpress (self hosted on DigitalOcean) to Hashnode. How did I migrate? I don't have too many articles on Wordpress but I don't like doing it manually so the first thing I did was look to see if there was an aut...

Dự án mình đang làm có yêu cầu sử dụng Azure Active Directory (AAD) để lưu trữ thông tin người dùng & xác thực đăng nhập các kiểu. Ngoài các trường thông tin cơ bản mà AAD hỗ trợ ra thì dự án mình cần lưu thêm 1 số thông tùy chọn khác cho người dùng....

Introduction This is a concise front-end application developed with Angular. You can create a beautiful form with drag and drop visualization. You can get inspiration from it to make a draggable form; at the same time, you can also modify it to suit ...

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