In einer Welt, in der die Zeit immer knapper wird, ist es oft von Vorteil, Tools zu verwenden, die uns die Arbeit bei der Erstellung von Inhalten abnehmen. Eines dieser Tools ist der WYSIWYG-Editor (What You See Is What You Get), der es denjenigen erleichtert, die nicht wissen, wie sie ihre Seiten programmieren sollen. Auf diese Weise können wir mehr Zeit damit verbringen, uns auf die Ideen zu konzentrieren, und müssen weniger Zeit mit der Formatierung verbringen, um den Inhalt ästhetisch ansprechend zu gestalten. So können auch technisch unerfahrene Personen schnell Bilder hochladen und über eine visuelle Schnittstelle Links zwischen den Seiten herstellen, was allen Beteiligten wertvolle Zeit spart und dafür sorgt, dass Ihre Website fantastisch aussieht!
CKEditor ist ein leistungsfähiges und einfach zu bedienendes WYSIWYG-Programm. Er ermöglicht es Benutzern, Inhalte direkt im Webbrowser zu bearbeiten, was für dynamische Websites eine wichtige Funktion ist. In diesem Artikel werden wir die Schritte zur Implementierung von CKEditor in einer Django-Anwendung erläutern.
Installation und Einrichtung
Bevor wir mit der Erstellung unseres Django-Projekts beginnen, sollten wir die erforderlichen Bibliotheken und andere Abhängigkeiten installieren. Ich werde hier sehr viel behandeln, aber Sie sollten über einige Grundkenntnisse über Django verfügen, um mir folgen zu können. Ich gehe davon aus, dass Sie bereits ein Django-Projekt laufen haben!
In diesem Tutorium werde ich speziell CKEditor 5 verwenden, die neueste Version von CKEditor und damit die mit den meisten Funktionen. Installieren Sie CKEditor 5 mit dem folgenden Befehl:
pip install django-ckeditor-5Als Nächstes öffnen Sie Ihre Datei settings.py und fügen CKeditor wie unten gezeigt zu Ihren INSTALLED_APPS hinzu:
# settings.py
INSTALLED_APPS = [
# ...
'django_ckeditor_5',
]Für die meisten anderen WYSIWYG-Editoren wäre dies der letzte Teil der Einstellungen, aber CKeditor erfordert einige zusätzliche Konfigurationen. Wenn Sie den Speicherort für die Mediendateien noch nicht eingerichtet haben, fügen Sie sie am Ende Ihrer Einstellungsdatei hinzu, wie gezeigt:
import os
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')Als nächstes fügen Sie eine CKEDITOR_UPLOAD_PATH-Einstellung in die Datei settings.py des Projekts ein. Um CKEditor für die Medienbearbeitung zu verwenden, müssen Sie den Pfad zu einem Ordner auf Ihrem Webserver angeben, in dem Mediendateien mit Bildern und anderen Inhalten gespeichert werden.
CKEDITOR_UPLOAD_PATH = "uploads/"Diese Einstellung gibt einen relativen Pfad zu Ihrem CKEditor-Medien-Upload-Verzeichnis an. Standardmäßig verwendet Django das Dateisystem als Backend (es werden Ihr MEDIA_ROOT und Ihre MEDIA_URL verwendet).
Nun werden die Bilder in einen Ordner in Ihrem MEDIA_ROOT mit dem Namen „uploads“ hochgeladen und die URLs werden unter MEDIA_URL erstellt.
Öffnen Sie nun die Datei urls.py und fügen Sie django_ckeditor_5.urls zu Ihren URL-Mustern hinzu und nehmen Sie die anderen Änderungen vor:
# urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ...
path('ckeditor5/', include('django_ckeditor_5.urls')),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)Hier habe ich auch die Ansicht zugänglich gemacht, indem ich die MEDIA_URL- und MEDIA_ROOT-Speicherorte am Ende der URL-Muster hinzugefügt habe, und die obigen Zeilen sind die erforderlichen Importe, damit es funktioniert.
Nachdem Sie alle vorherigen Schritte durchgeführt haben, können Sie nun endlich damit beginnen, dies in Ihren Modellen zu implementieren! Importieren Sie einfach CKEditor 5 in Ihre Modelle und fügen Sie das CKEditor5Field anstelle eines beliebigen anderen Modellfeldes ein. Hier ist ein Beispiel:
# app/models.py
from django.db import models
from django_ckeditor_5.fields import CKEditor5Field
class Page(models.Model):
title=models.CharField(max_length=200,null=True)
content = CKEditor5Field(null=True)
def __str__(self):
return self.title Wenn Sie diese Modellklasse bereits in der Datei admin.py registriert haben, können Sie nun den WYSIWYG-Editor im Admin-Bereich sehen. Erstellen Sie einfach einen Superuser-Account in Ihrem Django-Projekt und navigieren Sie zum Admin-Dashboard. Sie sollten in der Lage sein, CKEditor auf dem Inhaltsfeld Ihres Modells zu sehen:
Etwa so. Wie Sie sehen können, ist es im Moment noch sehr einfach gehalten und hat keine großen Funktionen. Das liegt daran, dass wir noch nichts definiert haben, wofür wir es verwenden wollen. Es gibt noch eine Menge Dinge, die wir hinzufügen oder anpassen können; unsere Datei settings.py ist der Punkt, an dem die meisten Anpassungen stattfinden werden.
Personalisierung
Jetzt für die Anpassung! Die Konfiguration von CKEditor 5 kann mithilfe der Datei config.js geändert oder beim Erstellen von CKEditor-Instanzen seitenintern erstellt werden. Wir empfehlen jedoch, die Konfiguration beim Erstellen von Editor-Instanzen seitenintern festzulegen, da Sie so die Änderung der ursprünglichen Distributionsdateien im CKEditor 5-Installationsordner vermeiden können, was ein Upgrade erleichtert.
Um dies zu tun, verwenden Sie die Einstellung CKEDITOR_CONFIGS in Ihrer Datei settings.py, die alle CKEditor-Einstellungen angibt, die Sie in Ihrem Editor zum Leben erwecken wollen. Hier haben wir eine sehr grundlegende Konfiguration der Symbolleiste des Editors vorgenommen:
CKEDITOR_5_CONFIGS = {
'default': {
'toolbar': ['heading', '|', 'bold', 'italic', 'link',
'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
}
}Um dies zu nutzen, müssten wir auch in unseren Modellen darauf verweisen, was auf diese Weise geschehen könnte:
content = CKEditor5Field(config_name='default',null=True) Hinweis: Wenn Sie eine Standardoption angeben, wird sie auf alle Objekte angewendet, auch wenn Sie keine seitenbezogenen Konfigurationen definiert haben.
Unser Editor sieht nun etwa so aus:
Wie Sie sehen können, sind alle Funktionen, die wir in unseren Einstellungen angegeben haben, hier vorhanden. Aber trotzdem fehlt es ein wenig an wichtigen Funktionen. Wenn Sie eine vollständig benutzerdefinierte Version Ihres Editors erstellen möchten, können Sie sich den Katalog von CKEDITOR config ansehen, in dem alle Konfigurationsvariablen von CKEditor angegeben sind.
Wenn Sie jedoch nur die notwendigen Funktionen hinzufügen möchten, können Sie deren vordefinierte Konfigurationen hinzufügen und sie nach Ihren Wünschen anpassen. Fügen Sie einfach den folgenden Code am Ende Ihrer settings.py-Datei ein, und schon können Sie loslegen.
customColorPalette = [
{
'color': 'hsl(4, 90%, 58%)',
'label': 'Red'
},
{
'color': 'hsl(340, 82%, 52%)',
'label': 'Pink'
},
{
'color': 'hsl(291, 64%, 42%)',
'label': 'Purple'
},
{
'color': 'hsl(262, 52%, 47%)',
'label': 'Deep Purple'
},
{
'color': 'hsl(231, 48%, 48%)',
'label': 'Indigo'
},
{
'color': 'hsl(207, 90%, 54%)',
'label': 'Blue'
},
]
CKEDITOR_5_CUSTOM_CSS = 'path_to.css' # optional
CKEDITOR_5_CONFIGS = {
'extends': {
'blockToolbar': [
'paragraph', 'heading1', 'heading2', 'heading3',
'|',
'bulletedList', 'numberedList',
'|',
'blockQuote', 'imageUpload'
],
'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
'code','subscript', 'superscript', 'highlight', '|', 'codeBlock',
'bulletedList', 'numberedList', 'todoList', '|', 'blockQuote', 'imageUpload', '|',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
'insertTable',],
'image': {
'toolbar': ['imageTextAlternative', 'imageTitle', '|', 'imageStyle:alignLeft', 'imageStyle:full',
'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side', '|'],
'styles': [
'full',
'side',
'alignLeft',
'alignRight',
'alignCenter',
]
},
'table': {
'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
'tableProperties', 'tableCellProperties' ],
'tableProperties': {
'borderColors': customColorPalette,
'backgroundColors': customColorPalette
},
'tableCellProperties': {
'borderColors': customColorPalette,
'backgroundColors': customColorPalette
}
},
'heading' : {
'options': [
{ 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
{ 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
{ 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
{ 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }
]
}
}
}Ändern Sie außerdem den config_name in Ihren Modellen von default auf extends:
content = CKEditor5Field(config_name='extends',null=True)Wenn Sie fertig sind, sieht es in etwa so aus:
Sie können sehen, dass alle notwendigen Funktionen vorhanden sind, sowie einige sehr nützliche, wie die Möglichkeit, Tabellen, Medien-URLs, Code-Blöcke, Unter- und Überschriften, etc. einzufügen.
Letzte Worte
In diesem Artikel haben wir einige gute Gründe genannt, warum Sie CKEditor als Ihren WYSIWYG-Editor der Wahl in Betracht ziehen sollten und wie Sie ihn in Ihre Django-Website implementieren können. Wir hoffen, dass Sie diese Informationen nützlich finden, wenn Sie sich für eine Content-Management-Lösung für Ihre Website entscheiden!
