Téléchargement d'images et personnalisation avec django-ckeditor

Qu'est-ce que tu as fait

Formulaire rempli

--Je voulais introduire WYSIWYG dans le modèle django, j'ai donc ajouté django-ckeditor --Par défaut, vous ne pouvez intégrer que des images à partir de liens URL, vous pouvez donc maintenant télécharger à partir du stockage local.

• Puisque l'écran de téléchargement n'a pas été traduit en japonais, je l'ai écrasé moi-même et je l'ai traduit en japonais. --Lors du téléchargement d'une image lourde, l'écran ne bouge pas, on ne sait donc pas si cela fonctionne-> Image de chargement implémentée

Environnement etc.

• macOS Mojave 10.14.6
• django-ckeditor 5.8.0

Comment faire

Paramètres autour de django-ckeditor

Installation et remarques

1. Comme vous pouvez le voir dans le README du dépôt, normalement pip install django-ckeditor.
2. Ajoutez ckeditor à ʻINSTALLED_APPS` dans les settings.py de django.
3. Si la commande collectstatic n'est pas paramétrée pour être exécutée, ajoutez STATIC_ROOT à settings.py et faitespython manage.py collectstatic.
4. Lors de l'utilisation avec Template autre que django-admin, il est nécessaire de décrire {{form.media}} dans Template. Ce qui suit est un exemple. (J'étais accro à ce réglage pendant une heure ...)

sample.html

  <h2>Enregistrement d'article de blog</h2>
  <form method="POST" enctype="multipart/form-data">
    {{ form.media }}
    {{ form.as_p }}
    {% csrf_token %}
    <button type="submit">s'inscrire</button>
  </form>

Appliquer le plug-in de téléchargement d'image

1. Ajoutez ckeditor_uploader à ʻINSTALLED_APPS` dans le fichier settings.py de django.
2. De même, dans settings.py, spécifiez le chemin pour enregistrer l'image téléchargée, tel que CKEDITOR_UPLOAD_PATH = 'uploads /'. (Ce sera le répertoire sous MEDIA_ROOT)
3. En outre, spécifiez CKEDITOR_ALLOW_NONIMAGE_FILES = False pour limiter le téléchargement de fichiers image uniquement. (Cette spécification n'est pas requise lors du téléchargement autre que des images)
4. En décrivant la spécification de CKEDITOR_IMAGE_BACKEND =" oreiller " dans settings.py, la vignette de l'image téléchargée sera automatiquement générée, et la vignette sera affichée lors de la navigation sur l'image qui apparaîtra plus tard.
5. Ajoutez le paramètre de téléchargement de ckeditor au routage d'URL de votre application. chemin ('ckeditor /', include ('ckeditor_uploader.urls'))
   Bien qu'il soit également dans le document officiel, @ staff_member_required est spécifié comme décorateur de l'url ajoutée dans 5 ci-dessus, donc cela peut ne pas fonctionner correctement si vous avez personnalisé le modèle utilisateur par défaut de django. (Par exemple, si vous avez supprimé la colonne is_staff)
   Dans ce cas, vous pouvez envelopper le contenu de ckeditor_uploader.urls, donc [Source officielle](https://github.com/django-ckeditor/django-ckeditor/blob/master/ckeditor_uploader] Créez urls.py selon /urls.py) et incluez-le.
   Voici un exemple d'utilisation de login_required au lieu de @ 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'),
]

Je pense que vous pouvez maintenant télécharger des images avec les paramètres jusqu'à présent

Traduit par vous-même en japonais

État par défaut

Dans l'état par défaut, il existe de nombreux onglets inutiles. En référence à cet article, je modifie naturellement le japonais en me concentrant sur le minimum d'onglets nécessaires.

Personnaliser l'éditeur CK

Il y a une source liée à la configuration de ckeditor config.js dans static / ckeditor / ckeditor / config.js, Si vous modifiez cela tel quel, cela semble être gênant plus tard, donc je crée js individuellement et le charge du côté du modèle cible.

ckeditor_config.js

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

//Omis car la description de l'article d'origine est telle qu'elle est

});

Avec cela seul, lorsque vous ouvrez le navigateur du serveur, il n'est pas traduit en japonais comme indiqué ci-dessous.

Je vais traduire cela en japonais.

Remplacer le modèle de navigateur

Si vous regardez Source officielle views.py, il affiche ckeditor / blowse.html Vous pouvez voir qu'il y en a. Alors, référez-vous à Source officielle parcourir.html et vérifiez les pièces nécessaires. Traduire en japonais.

Ensuite, placez-le comme modèle de ckeditor dans des modèles sous l'application appropriée de Django. (Exemple: blog / templates / ckeditor / blowse.html) De cette façon, les modèles d'origine seront utilisés et affichés à la place des modèles de bibliothèque.

Mettre en œuvre l'image de chargement

Si vous sélectionnez une image localement et appuyez sur le bouton de téléchargement, le téléchargement de la grande image prendra du temps et l'écran ne changera pas pendant un certain temps. Du point de vue de l'utilisateur, rien ne semble fonctionner, je vais donc publier une image de chargement pour que je sache qu'elle est en cours de téléchargement.

Modifiez le ckeditor_config.js créé précédemment et ajoutez ce qui suit.

ckeditor_config.js

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

    editor.on('fileUploadRequest', function(ev){
        const fileLoader = ev.data.fileLoader;
        //En liant les notifications, les notifications apparaîtront sur l'écran d'édition principal, mais cette fois c'est une boîte de dialogue différente, donc cela n'a pas beaucoup de sens.
        // CKEDITOR.fileTools.bindNotifications(fileLoader.editor, fileLoader);

        fileLoader.on("uploading", function () {
            console.log("Commencer le téléchargement");
        });

        fileLoader.on("uploaded", function () {
            console.log("Téléchargement terminé");
        });

        fileLoader.on("error", function () {
            console.log("Erreur de téléversement");
        });

        fileLoader.on("abort", function () {
            console.log("Échec du téléchargement");
        });
    });
});

Dans ce qui précède, nous avons accroché l'événement ʻinstanceReadyde CKEDITOR pour obtenir le widget de téléchargement de fichiersfileLoader. Un écouteur est défini pour chaque événement défini dans fileLoader`. Vous pouvez vous connecter à ces événements et contrôler l'affichage / non-affichage de chaque image de chargement.

à la fin

――L'introduction de ckeditor est facile, mais si vous souhaitez le personnaliser, vous devez lire la source de la famille d'origine, ce qui est assez difficile. ,Cependant, créer vous-même WYSIWYG est plus difficile, donc c'est beaucoup plus facile que cela. ――Répétez, cet article m'a vraiment aidé.