Image upload & customization with django-ckeditor

What did you do

Completed form

--I wanted to introduce WYSIWYG to django template, so I added django-ckeditor --By default, images can only be embedded from URL links, so uploading from local storage is now possible. --Since the upload screen was not translated into Japanese, I overwrote it myself and translated it into Japanese. --When uploading a heavy image, the screen does not move, so it is unknown whether it is working-> Implemented loading image

Environment etc.

• macOS Mojave 10.14.6
• django-ckeditor 5.8.0

How to do

Settings around django-ckeditor

Installation and notes

1. As you can see in the repository README, do a normal pip install django-ckeditor.
2. Add ckeditor to ʻINSTALLED_APPS` in django's settings.py.
3. If the collectstatic command is not set to be executed, add STATIC_ROOT to settings.py and dopython manage.py collectstatic.
4. If you want to use it in a Template other than django-admin, you need to include {{form.media}} in the Template. The following is an example. (I was addicted to this setting for an hour ...)

sample.html

  <h2>Blog article registration</h2>
  <form method="POST" enctype="multipart/form-data">
    {{ form.media }}
    {{ form.as_p }}
    {% csrf_token %}
    <button type="submit">sign up</button>
  </form>

Apply upload image plugin

1. Add ckeditor_uploader to ʻINSTALLED_APPS` in django's settings.py.
2. Similarly, in settings.py, specify the path to save the uploaded image, such as CKEDITOR_UPLOAD_PATH ='uploads /'. (This will be the directory under MEDIA_ROOT)
3. In addition, specify CKEDITOR_ALLOW_NONIMAGE_FILES = False to limit the upload of only image files. (This specification is not required when uploading other than images)
4. By specifying CKEDITOR_IMAGE_BACKEND =" pillow " in settings.py, thumbnails of uploaded images will be automatically generated, and thumbnails will be displayed when browsing images that will appear later.
5. Add the ckeditor uploader setting to your app's url routing. path ('ckeditor /', include ('ckeditor_uploader.urls'))
   Although it is also in the official document, since @staff_member_required is specified as the decorator of the url added in 5 above, it may not work well if you customize the default Usermodel of django. (For example, if you have deleted the is_staff column)
   In that case, you can wrap the contents of ckeditor_uploader.urls, so [Official Source](https://github.com/django-ckeditor/django-ckeditor/blob/master/ckeditor_uploader] Create urls.py according to /urls.py) and include it.
   The following is an example of using login_required instead of @staff_member_required.

ckedtiror_custom_urls.py

from __future__ import absolute_import

from django.conf.urls import url
from django.contrib.auth.decorators import login_required
from django.views.decorators.cache import never_cache

from ckeditor_uploader import views

urlpatterns = [
    url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
    url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
]

I think you can now upload images with the settings up to this point.

Japaneseized by yourself

Default state

In the default state, there are many unnecessary tabs. With reference to this article, I am naturally modifying Japanese by focusing on the minimum required tabs.

Customize CKEditor

There is a ckeditor config.js configuration related source in static / ckeditor / ckeditor / config.js, If you edit this as it is, it seems to be troublesome later, so I create js individually and load it on the target template side.

ckeditor_config.js

CKEDITOR.on("dialogDefinition", function (ev) {

//Omitted because the description of the original article is as it is

});

With this alone, when you open the server browser, it is not translated into Japanese as shown below.

I will translate this into Japanese.

Overwrite browser template

Looking at the official source views.py (https://github.com/django-ckeditor/django-ckeditor/blob/master/ckeditor_uploader/views.py), it renders ckeditor / blowse.html You can see that there is. So, refer to Official source browse.html and check the necessary parts. Translate to Japanese.

Then, place it as a template of ckeditor in templates under the appropriate App of Django. (Example: blog / templates / ckeditor / blowse.html) That way, the original templates will be used and displayed instead of the libraries in the library.

Implement loading image

If you select an image locally and press the upload button, if the image has a large capacity, it will take a long time to upload and the screen will not switch for a while. From the user's point of view, nothing seems to be working, so I'll put out a loading image so that I know it's being uploaded.

Edit the ckeditor_config.js created earlier and add the following.

ckeditor_config.js

CKEDITOR.on( 'instanceReady', function(ev){
    const editor = ev.editor;

    editor.on('fileUploadRequest', function(ev){
        const fileLoader = ev.data.fileLoader;
        //By binding Notifications, notifications will appear on the main edit screen, but this time it's a different Dialog, so it doesn't make much sense.
        // CKEDITOR.fileTools.bindNotifications(fileLoader.editor, fileLoader);

        fileLoader.on("uploading", function () {
            console.log("Start uploading");
        });

        fileLoader.on("uploaded", function () {
            console.log("Upload completed");
        });

        fileLoader.on("error", function () {
            console.log("Upload error");
        });

        fileLoader.on("abort", function () {
            console.log("Upload failure");
        });
    });
});

In the above, hook to CKEDITOR's ʻinstanceReadyevent to get the file upload widgetfileLoader, A listener is set for each event defined in fileLoader`. You can hook to these events and control the display / non-display of the loading image respectively.

at the end

――Introduction of ckeditor is easy, but if you want to customize it, you have to read the source of the original family, which is quite difficult. ――However, making WYSIWYG on your own is more difficult, so it's a lot easier than that. ――Repeat, this article really helped me.