How to add html5 video plugin to django ckeditor

Hello, in this post i am going to show you how to download and add html5video plugin to django ckeditor.

Please note the following;

• I am using django-ckeditor 6.2.0 for this post.
• I am assuming that you have your ckeditor installed in your django project.
• Also for the vidoe upload to server functionality to work you have to use "RichTextUploadingField()" for your model field.
• The process followed in this article is similar that of my previous article on how to add YouTube plugin to Django CkEditor. click on this link to read the article.

Alright lets begin;

Step 1

Go to ckeditor html5 video plugin download website by clicking on this link.

Step 2

Scroll down and click on the download button to download the html5video plugin zipfile.

Step 3

After downloading extract the zipfile into a new folder. We are not extracting the zipfile directly into the ckeditor plugins folder because the html5 video folder is not the first level folder we get on extraction.

Step 4

Open the folder you extracted the zipfile to. Inside you will see another folder, open that one too then copy the html5video folder inside it.

Step 5

Go to your django project root directory. I need you to focus on this next part, you have to follow my steps precisely

• In your project root directory inside static folder create a folder and name it ckeditor
• Open the folder you just created and inside it create another folder and name it ckeditor.
• Open the ckeditor folder you created in stage 2 and inside it create a folder and name it plugins.
• Now finallly inside the plugins folder you created paste in the html5video folder you copied in step 4 

Your directory should now look like this static / ckeditor / ckeditor / plugins / html5video/.

Step 6

Go to your project urls.py file and add in this urlpattern settings.

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Your urls.py should now look like the one below

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("blog.urls")),
    path('ckeditor/', include('ckeditor_uploader.urls'))
]
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Step 7

Ensure that the code below is in your settings.py file. If it is not then copy and paste it inside.

STATIC_URL = 'static/'
STATICFILES_DIRS = os.path.join(BASE_DIR, 'static'),
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles_build', 'static')
MEDIA_URL = '/images/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

The will ensure that django also looks for staticfiles in this directory "static".

Step 8

Add the code below to your django projects settings.py.

CKEDITOR_CONFIGS = {
    'default': {
        'extraPlugins': ','.join(
            [
                'html5video',
            ]),
    },
}

 

Step 9

For the final step, stop your development server if you have one running and then restart your ide or code editor. If everything worked successfully you should see  video upload option in your ckeditor toolbar as shown below.

Conclusion

From this post we have been able to download the html5video plugin and added it to ckeditor to enable the use of video upload to server functionality in a django project. This process also works if you are using django rest framework as a backend server

Thanks for reading, please leave a comment down below if you have any questions about the post.