Tùy chỉnh video tải lên ckeditor đá quý

Tram Ho

Nếu bạn đã từng sử dụng gem ckeditor , có thể các bạn cũng đã biết gem này chỉ hỗ trợ ckeditor 4, đồng nghĩa với việc rất nhiều tính năng của các phiên bản ckeditor mới ko được cung cấp trong gem này . Một trong số đó là việc ko tích hợp trực tiếp CKFinder – một tính năng quản lý files upload dưới dạng media library rất thân thiện :

Đến thời điểm hiện tại, mình vẫn chưa tìm được cách tích hợp CKFinder cùng với gem ckeditor , nên mình đành phải sử dụng các plugin upload ảnh, videos, audio sẵn có trên ckeditor. Và vấn đề thực sự nằm ở các thư mục lưu files upload của ckeditor . Mặc định gem ckeditor sẽ chỉ chia cho bạn 2 thư mục :pictures, attachment_files tương ứng với 2 trang xử lý upload.

Như vậy, khi bạn dùng plugin upload video, audio , các định dạng khác ngoài pictures thì gem ckeditor sẽ dùng chung trang /attachment_files để xử lý upload .

Đồng nghĩa với việc, file video, audio, pdf , … sẽ cùng lưu vào một thư mục ; đây là điều không tốt trong nhiều trường hợp. Vì vậy, trong bài viết này, mình sẽ hướng dẫn các bạn custom gem ckeditor để có thể tạo ra một trang xử lý riêng cho audio files (áp dụng tương tự cho một file types khác với pictures).

1. Tạo project rails và cài gem ckeditor

Đầu tiên, các bạn tạo một Rails application bằng lệnh này(demo này chỉ sử dụng Rails 5, cụ thể là phiên bản 5.2.1 nhé ) :

trong Gemfile các bạn cài đặt gem ckeditor và các dependencies của nó :

sau đó chạy:

Các bạn tải file ckeditor_custom.js bản 4.6.1 trên cdn về ở đây . Sau đó, tạo một file config.js như sau :

Các bạn đặt 2 file nói trên vào 2 thư mục : app/assets/javascripts/ckeditor_custom.js , app/assets/javascripts/ckeditor/config.jsvà cho nó vào trong application.js

Bây giờ ta tạo một trang tạo bài báo như sau:

Ok thế là xong, giờ đại loại chúng ta sẽ có một cái views như thế này :

Như các bạn thấy, trên toolbar ckeditor đã có sẵn nút insert images nên chúng ta không cần phải tải plugin nữa. Bây giờ mình sẽ tích hợp plugin video và tạo cho nó 1 trang xử lý upload riêng.

2. Tích hợp plugin video lên toolbar của ckeditor

Đầu tiên các bạn tải plugin video về tại đây và giải nén nó vào trong thư mục app/assets/javascripts/ckeditor/plugins/ . Sau đó thêm dòng này file config.js :

Trong thanh toolbar của file config.js nhớ thêm item Video ví dụ :

Âu kay, bây giờ chúng ta đã có một chiếc nút upload video như này :

Các bạn có thể thấy, nó chưa có nút Browse Server để upload file lên, vì mình chưa config đường dẫn server cho plugin video . Giờ mình thử thêm 2 dòng này vào file config.js :

Và giờ chúng ta đã có thể upload video vào content của bài báo, tuy nhiên vẫn có một điều không ổn :

Như các bạn đã thấy , mình đã thêm đường dẫn /ckeditor/attachment_files để làm đường dẫn server upload video. Tuy nhiên server này vốn dùng để upload các file doc, docx, xls, odt, ods, pdf, rar, zip, tar, tar.gz, sw nên nó đã thực hiện validate extension khiến file .mp4 không tải lên server được .
Vậy chúng ta thử thay 2 đường dẫn nói trên bằng /ckeditor/videos xem.

Kết quả là :

Như các bạn đã thấy, Rails báo rằng ứng dụng của chúng ta chưa có trang /ckeditor/videos . Vậy ở phần 3, mình sẽ hướng dẫn các bạn tạo trang này.

3. Tạo trang upload videos dựa trên gem ckeditor .

Ý tưởng rất đơn giản, trang upload video giống hệt các trang upload images hay attachment_files có sẵn trong gem ckeditor .Việc các bạn cần làm chỉ là mở sourecode của nó ra và copy code của trang upload images về thư mục app, chỗ nào cần sửa images thành video thì chúng ta sửa.

Đầu tiên, thêm routes cho trang upload video, ở file routes.rb :

Các file upload trong content của Ckeditor được lưu vào database nhờ model Ckeditor:Asset. Các model Ckeditor:PictureCkeditor:AttachmentFile đều kế thừa từ model Ckeditor:Asset, nên ta tạo một model Ckeditor:Video tương tự như sau :

Tạo một file thumbnail app/assets/images/video.png. để hiển thị trên màn hình list video upload . Các bạn có thể tải file tại đây.
Tạo thêm một uploader cho model nói trên :

Thêm extension type cho video trong file ckeditor.rb

Thêm controller xử lý upload:

Thêm view cho trang upload:

Thế là xong, và giờ chúng ta đã có thể upload những chiếc video xinh xắn vào content :

Các bạn hoàn toàn có thể làm điều tương tự với các plugin audio, link,….
Bài viết đến đây là kết thúc, hy vọng nó có ích với các bạn.


References:
https://github.com/galetahub/ckeditor

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo