Ajout de la fonction d'extrait de code à django-ckeditor

django-ckeditor est une bibliothèque pratique qui fournit un éditeur de texte riche (un périphérique d'entrée avec des fonctions d'édition multifonctionnelles?)!

J'omettrai la méthode d'installation. (Si j'ai le temps, je l'écrirai dans un autre article! Cette fois, je voudrais résumer comment implémenter un extrait de code (une fonction qui affiche bien du code tel que python et JS) dans ckeditor.

Étape 1. Faites reconnaître le plug-in par CKEDITOR_CONFIG.

Lors de la configuration de django-ckeditor, je pense que la description suivante est faite dans setting.py.

setting.py

CKEDITOR_CONFIGS = {
    'default': {
        'height': 150,  #Par défaut, cela signifie fixé à une hauteur de 150px
        'width': '100%',  #Fixé à la largeur de l'élément parent par défaut-> pratique.
    },
}

J'ai un peu peaufiné les paramètres, mais cela devrait ressembler à ceci.

Vous pouvez ajouter vos propres paramètres ici, mais le contenu est différent de l'objectif de cet article, il sera donc dans un article séparé.

Ensuite, ajoutez la fonction d'extrait de code sous la forme de «plugins supplémentaires» aux paramètres personnalisés suivants. (En plus de cela, l'éditeur django-ck peut étendre la fonction sous la forme d'un plug-in.

setting.py

CKEDITOR_CONFIGS = {
    'custom_toolbar': {
        'height': 150,
        'width': '100%',
        'toolbar_Custom': [
            ['CodeSnippet'],  #C'est la fonction de l'extrait de code
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['NumberedList', 'BulletedList'],
            ['Maximize'],
            ['Styles', 'Format'],
        ],
        'toolbar': 'Custom',
        'extraPlugins': ','.join(['codesnippet']),  #Plug-in de fonction d'extrait de code

    },
    'default': {
        # 'toolbar': 'Basic',
        'height': 150,
        'width': '100%',
    },
}

Étape 2. Activez l'affichage d'extraits de code dans le modèle.

Si rien n'est fait, l'extrait de code ne sera pas activé comme indiqué ci-dessous lors de l'appel du texte créé par le modèle.

Pour l'activer avec un modèle, vous devez lire le fichier JS / CSS suivant.

template

{#Fichier CSS sur le thème#}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">


{#Fichier JS + exécution#}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 

Maintenant, le modèle attribue le thème comme suit.

Extra: changer le thème

Le thème est maintenant correctement attribué, mais quelque chose ne suffit pas. .. .. Je veux attribuer un autre thème! Dans ce cas, veuillez rechercher votre thème préféré sur le site suivant. Vous pouvez utiliser le CDN de chaque thème.

https://cdnjs.com/libraries/highlight.js

Par exemple, si vous souhaitez passer en monokai

template

{#Fichier CSS sur le thème#}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">　-->Change ça

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">　-->Après le changement
 

Si vous spécifiez le fichier css du thème que vous souhaitez modifier comme ci-dessus, vous pouvez attribuer votre thème préféré comme suit!

À la fin

Merci d'avoir créé de nombreuses fonctionnalités. .. .. Je remercie mes ancêtres. Lol