[PYTHON] Hochladen und Anpassen von Bildern mit django-ckeditor

Was hast du getan

Vollständiges Formular

• Ich wollte WYSIWYG in die Django-Vorlage einführen, also habe ich [django-ckeditor] hinzugefügt (https://github.com/django-ckeditor/django-ckeditor).
• Standardmäßig konnten Sie nur Bilder von URL-Links einbetten, sodass Sie sie jetzt aus dem lokalen Speicher hochladen können.
• Da der Upload-Bildschirm nicht ins Japanische übersetzt wurde, habe ich ihn selbst überschrieben und ins Japanische übersetzt. --Wenn Sie ein schweres Bild hochladen, bewegt sich der Bildschirm nicht, sodass nicht bekannt ist, ob es funktioniert-> Das Laden des Bildes wurde implementiert

Umwelt etc.

• macOS Mojave 10.14.6
• django-ckeditor 5.8.0

Wie macht man

Einstellungen rund um django-ckeditor

Installation und Hinweise

1. Wie Sie in der README des Repositorys sehen können, wird normalerweise "pip install django-ckeditor" verwendet.
2. Fügen Sie "ckeditor" zu "INSTALLED_APPS" in djangos settings.py hinzu.
3. Wenn der Befehl collectstatic nicht für die Ausführung festgelegt ist, fügen Sie "STATIC_ROOT" zu settings.py hinzu und führen Sie "python manage.py collectstatic" aus.
4. Bei Verwendung mit einer anderen Vorlage als django-admin muss {{form.media}} in der Vorlage beschrieben werden. Das Folgende ist ein Beispiel. (Ich war eine Stunde lang süchtig nach dieser Einstellung ...)

sample.html

  <h2>Registrierung von Blogartikeln</h2>
  <form method="POST" enctype="multipart/form-data">
    {{ form.media }}
    {{ form.as_p }}
    {% csrf_token %}
    <button type="submit">zu registrieren</button>
  </form>

Wenden Sie das Upload-Bild-Plug-In an

1. Fügen Sie ckeditor_uploader zu INSTALLED_APPS in djangos settings.py hinzu.
2. Geben Sie in settings.py auf ähnliche Weise den Pfad zum Speichern des hochgeladenen Bildes an, z. B. "CKEDITOR_UPLOAD_PATH =" uploads / ". (Dies ist das Verzeichnis unter MEDIA_ROOT)
3. Geben Sie außerdem "CKEDITOR_ALLOW_NONIMAGE_FILES = False" an, um das Hochladen nur von Bilddateien zu begrenzen. (Diese Spezifikation ist nicht erforderlich, wenn Sie andere Bilder als Bilder hochladen.)
4. Durch Beschreiben der Spezifikation von "CKEDITOR_IMAGE_BACKEND =" pillow "" in settings.py wird automatisch die Miniaturansicht des hochgeladenen Bildes generiert und die Miniaturansicht wird angezeigt, wenn Sie das später angezeigte Bild durchsuchen.
5. Fügen Sie die Ukloitor-Einstellung ckeditor zum URL-Routing Ihrer App hinzu. path ('ckeditor /', include ('ckeditor_uploader.urls'))
   Obwohl es auch im offiziellen Dokument enthalten ist, wird "@ staff_member_required" als Dekorator der in 5 oben hinzugefügten URL angegeben, sodass es möglicherweise nicht gut funktioniert, wenn Sie das Standardbenutzermodell von django anpassen. (Wenn Sie beispielsweise die Spalte is_staff gelöscht haben)
   In diesem Fall können Sie den Inhalt von ckeditor_uploader.urls umschließen, also [Offizielle Quelle](https://github.com/django-ckeditor/django-ckeditor/blob/master/ckeditor_uploader] Erstellen Sie urls.py gemäß /urls.py) und fügen Sie es hinzu.
   Das Folgende ist ein Beispiel für die Verwendung von "login_required" anstelle von "@ 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'),
]

Ich denke, dass Sie jetzt Bilder mit den bisherigen Einstellungen hochladen können

Von Ihnen selbst ins Japanische übersetzt

Standardzustand

Im Standardzustand gibt es viele unnötige Registerkarten. In Bezug auf diesen Artikel ändere ich natürlich Japanisch, indem ich mich auf die minimal erforderlichen Registerkarten konzentriere.

CK-Editor anpassen

Es gibt eine konfigurationsbezogene Quelle für ckeditor config.js in static / ckeditor / ckeditor / config.js. Wenn Sie dies so bearbeiten, wie es ist, scheint es später problematisch zu sein, also erstelle ich js einzeln und lade es auf der Seite der Zielvorlage.

ckeditor_config.js

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

//Ausgelassen, da die Beschreibung des Originalartikels unverändert ist

});

Wenn Sie den "Server-Browser" öffnen, wird er nicht wie unten gezeigt ins Japanische übersetzt.

Ich werde dies ins Japanische übersetzen.

Browser-Vorlage überschreiben

Wenn Sie sich Official source views.py ansehen, wird "ckeditor / blowse.html" gerendert Sie können sehen, dass es gibt. Lesen Sie daher Offizielle Quelle browse.html und überprüfen Sie die erforderlichen Teile. Ins Japanische übersetzen.

Platzieren Sie es dann als Vorlage für ckeditor in Vorlagen unter der entsprechenden App von Django. (Beispiel: blog / templates / ckeditor / blowse.html) Auf diese Weise werden die Originalvorlagen anstelle der Bibliotheksvorlagen verwendet und angezeigt.

Ladebild implementieren

Wenn Sie ein Bild lokal auswählen und die Upload-Taste drücken, dauert das Hochladen des großen Bildes lange und der Bildschirm wechselt eine Weile nicht. Aus Sicht des Benutzers scheint nichts zu funktionieren, daher werde ich ein Ladebild veröffentlichen, damit ich weiß, dass es hochgeladen wird.

Bearbeiten Sie die zuvor erstellten ckeditor_config.js und fügen Sie Folgendes hinzu.

ckeditor_config.js

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

    editor.on('fileUploadRequest', function(ev){
        const fileLoader = ev.data.fileLoader;
        //Durch das Binden von Benachrichtigungen werden Benachrichtigungen auf dem Hauptbearbeitungsbildschirm angezeigt. Diesmal handelt es sich jedoch um einen anderen Dialog, sodass dies wenig sinnvoll ist.
        // CKEDITOR.fileTools.bindNotifications(fileLoader.editor, fileLoader);

        fileLoader.on("uploading", function () {
            console.log("Starten Sie den Upload");
        });

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

        fileLoader.on("error", function () {
            console.log("Fehler beim Hochladen");
        });

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

Verbinden Sie sich oben mit dem Ereignis "instanceReady" von CKEDITOR, um das Datei-Upload-Widget "fileLoader" abzurufen. Für jedes in fileLoader definierte Ereignis wird ein Listener festgelegt. Sie können sich an diese Ereignisse anschließen und die Anzeige / Nichtanzeige jedes Ladebilds steuern.

schließlich

――Die Einführung von ckeditor ist einfach, aber wenn Sie es anpassen möchten, müssen Sie die Quelle der ursprünglichen Familie lesen, was ziemlich schwierig ist. ――Das Erstellen von WYSIWYG auf eigene Faust ist jedoch schwieriger, daher ist es viel einfacher. ――Wiederholen Sie, dieser Artikel hat mir wirklich geholfen.