Custom gem ckeditor to upload videos

If you’ve ever used the ckeditor gem , you probably already know this gem only supports ckeditor 4, which means that many of the features of the new ckeditor versions are not provided in this gem . One of them is the lack of direct integration of CKFinder – a feature to manage files uploaded as a media library very friendly:

Up to now, I still have not found a way to integrate CKFinder with gem ckeditor , so I had to use photo, video and audio upload plugins available on ckeditor. And the real problem lies in the ckeditor’s upload files . By default, gem ckeditor will only divide you with 2 folders: pictures, attachment_files corresponding to 2 upload processing pages.

Thus, when you use the plugin to upload video , audio , and formats other than pictures, the gem ckeditor will use the same page /attachment_files to handle the upload.

That means, video, audio, pdf, … files will be saved in the same folder; This is not good in many cases. Therefore, in this article, I will guide you to custom gem ckeditor to be able to create a separate processing page for audio files (the same applies to a file types other than pictures).

1. Create project rails and install gem ckeditor

First, create a Rails application with this command (this demo only uses Rails 5, specifically the version 5.2.1):

In Gemfile you install ckeditor gem and its dependencies:

then run:

You can download file ckeditor_custom.js version 4.6.1 on cdn here . Then create a config.js file as follows:

You put the 2 files above into 2 directories: app/assets/javascripts/ckeditor_custom.js , app/assets/javascripts/ckeditor/config.js and put it into application.js

Now we create a page to create the following article:

Ok that’s it, now we’re going to have a view like this: As you can see, the ckeditor toolbar already has an insert images button, so we don’t need to download the plugin anymore. Now I will integrate the video plugin and make it a separate upload processing page.

2. Integrate the video plugin into the ckeditor toolbar

First, download the video plugin here and extract it into app/assets/javascripts/ckeditor/plugins/ . Then add this line config.js file:

In the toolbar of the config.js file remember to add the Video item for example:

Au kay, now we have a video upload button like this: As you can see, it doesn’t have a Browse Server button to upload files yet, because I haven’t configured the server path for the video plugin. Now I try to add these 2 lines to the config.js file:

And now we can upload videos to the content of the article, but there is one thing that is not good: As you can see, I added the path /ckeditor/attachment_files to make the path for the server to upload the video. However, this server is used to upload doc, docx, xls, odt, ods, pdf, rar, zip, tar, tar.gz, sw so it has implemented a validate extension that prevents the .mp4 file from being uploaded to the server. So we try to replace the two links above with /ckeditor/videos .

The result is :

As you can see, Rails states that our application does not have /ckeditor/videos . So in part 3, I will guide you to create this page.

3. Create video upload page based on gem ckeditor.

The idea is very simple, the video upload page identical pages to upload images or attachment_files available in gem ckeditor .The you need to do is just open sourecode of it and copy code of the page to upload images on the directory app , where necessary fix images into video then we fix.

First, add routes to the video upload page, in the routes.rb file:

The uploaded files in Ckeditor ‘s content are saved to the database thanks to the Ckeditor:Asset model. Ckeditor:Picture and Ckeditor:AttachmentFile models inherit from the Ckeditor:Asset model, so we create a Ckeditor:Video model Ckeditor:Video similar to the following:

Create a thumbnail file app/assets/images/video.png. to display on the video upload list screen. You can download the file here. Create an uploader for the aforementioned model:

Add extension type to video in file ckeditor.rb