Image upload & customization with django-ckeditor

What did you do

Completed form

upload.gif

--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.

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

image.png

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. image.png

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.

Recommended Posts

Image upload & customization with django-ckeditor
Image upload function with Vue.js + Flask
Upload files with Django
Image processing with MyHDL
Image recognition with keras
File upload with django
Template customization with PyDev
Image processing with Python
Image Processing with PIL
Resize multipart.File type image with golang ~ Upload to S3
Image processing with Python (Part 2)
Image processing with PIL (Pillow)
Image editing with python OpenCV
Sorting image files with Python (2)
Sorting image files with Python (3)
Easy image classification with TensorFlow
Create Image Viewer with Tkinter
Image processing with Python (Part 1)
Tweet with image in Python
Sorting image files with Python
Image processing with Python (Part 3)
Image caption generation with Chainer
Get image features with OpenCV
File upload with Flask + jQuery
Image recognition with Keras + OpenCV
[Python] Image processing with scikit-image
Image upload & download to Azure Storage. With Python + requests + REST API
Cut out an image with python
Real-time image processing basics with opencv
[Python] Using OpenCV with Python (Image Filtering)
[Python] Using OpenCV with Python (Image transformation)
Image segmentation with scikit-image and scikit-learn
Image processing with Python 100 knocks # 3 Binarization
Upload & move GCS files with Go
Image classification with wide-angle fundus image dataset
Let's do image scraping with Python
Find image similarity with Python + OpenCV
Try blurring the image with opencv2
Convert PDF to image with ImageMagick
Image processing with Python 100 knocks # 2 Grayscale
Compare two images with image hash
Send image with python, save with php
Upload and download images with falcon
Gradation image generation with Python [1] | np.linspace