[PYTHON] Code-Snippet-Funktion zu django-ckeditor hinzugefügt

django-ckeditor ist eine praktische Bibliothek, die einen Rich-Text-Editor bietet (ein Eingabegerät mit multifunktionalen Bearbeitungsfunktionen?)!

Ich werde die Installationsmethode weglassen. (Wenn ich Zeit habe, werde ich es in einem anderen Artikel schreiben! Dieses Mal möchte ich zusammenfassen, wie ein Code-Snippet (eine Funktion, die Code wie Python und JS gut anzeigt) in ckeditor implementiert wird.

Schritt 1. Lassen Sie CKEDITOR_CONFIG das Plug-In erkennen.

Beim Setzen von django-ckeditor denke ich, dass die folgende Beschreibung in settings.py gemacht wird.

setting.py

CKEDITOR_CONFIGS = {
    'default': {
        'height': 150,  #Standardmäßig bedeutet dies, dass die Höhe auf 150 Pixel festgelegt ist
        'width': '100%',  #Standardmäßig auf die Breite des übergeordneten Elements festgelegt-> praktisch.
    },
}

Ich habe die Einstellungen ein wenig angepasst, aber es sollte so aussehen.

Sie können hier Ihre eigenen Einstellungen hinzufügen, aber der Inhalt unterscheidet sich vom Zweck dieses Artikels, sodass er in einem separaten Artikel enthalten ist.

Fügen Sie als Nächstes die Code-Snippet-Funktion in Form von 'ExtraPlugins' zu den folgenden selbst vorgenommenen Einstellungen hinzu. (Darüber hinaus kann der django-ck-Editor die Funktion in Form eines Plug-Ins erweitern.

setting.py

CKEDITOR_CONFIGS = {
    'custom_toolbar': {
        'height': 150,
        'width': '100%',
        'toolbar_Custom': [
            ['CodeSnippet'],  #Dies ist die Funktion des Code-Snippets
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['NumberedList', 'BulletedList'],
            ['Maximize'],
            ['Styles', 'Format'],
        ],
        'toolbar': 'Custom',
        'extraPlugins': ','.join(['codesnippet']),  #Plug-In für die Code-Snippet-Funktion

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

Schritt 2. Aktivieren Sie die Anzeige von Codefragmenten in der Vorlage.

Wenn nichts unternommen wird, wird das Codefragment nicht wie unten gezeigt aktiviert, wenn der von der Vorlage erstellte Text aufgerufen wird.

Um es mit Vorlage zu aktivieren, müssen Sie die folgende JS / CSS-Datei lesen.

template

{#CSS-Datei zum Thema#}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">


{#JS-Datei + Ausführung#}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 

Jetzt weist die Vorlage das Thema wie folgt zu.

Extra: Ändern Sie das Thema

Das Thema ist jetzt richtig zugeordnet, aber etwas reicht nicht aus. .. .. Ich möchte ein anderes Thema zuweisen! In diesem Fall suchen Sie bitte auf der folgenden Website nach Ihrem Lieblingsthema. Sie können das CDN jedes Themas verwenden.

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

Zum Beispiel, wenn Sie zu Monokai wechseln möchten

template

{#CSS-Datei zum Thema#}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">　-->Ändere das

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">　-->Nach der veränderung
 

Wenn Sie die CSS-Datei des Themas angeben, das Sie wie oben ändern möchten, können Sie Ihr Lieblingsthema wie folgt zuweisen!

Am Ende

Vielen Dank, dass Sie viele Funktionen erstellt haben. .. .. Ich danke meinen Vorfahren. Lol