Dans un monde où le temps est de plus en plus rare, il est souvent avantageux d’utiliser des outils qui nous évitent les démarches nécessaires lors de la création de contenu. L’un de ces outils est l’éditeur WYSIWYG (What You See Is What You Get) qui facilite la tâche des personnes qui ne savent pas comment coder leurs propres pages. De cette façon, nous pouvons passer plus de temps à nous concentrer sur les idées et moins de temps à jouer avec le formatage afin de rendre le contenu esthétiquement agréable. Il permet aux personnes sans expérience technique de télécharger rapidement des images et de créer des liens entre les pages à l’aide d’une interface visuelle qui fait gagner un temps précieux à tout le monde et garantit que votre site Web est superbe !
CKEditor est un WYSIWYG puissant et facile à utiliser. Il permet aux utilisateurs de modifier le contenu directement dans le navigateur Web, ce qui est une fonctionnalité essentielle pour les sites Web dynamiques. Dans cet article, nous allons parcourir les étapes pour implémenter CKEditor dans une application Django.
Installation et configuration
Avant de commencer à créer notre projet Django, installons les bibliothèques nécessaires et les autres dépendances dont nous aurons besoin. Je couvrirai beaucoup de terrain ici, mais vous devriez avoir quelques connaissances de base sur Django pour suivre. Je suppose que vous en avez déjà un en cours d’exécution !
Dans ce tutoriel, j’utiliserai spécifiquement CKEditor 5, qui est la dernière version de CKEditor et est donc la plus riche en fonctionnalités. Installez CKEditor 5 avec la commande suivante :
pip install django-ckeditor-5Ensuite, ouvrez votre fichier settings.py et ajoutez CKeditor à vos INSTALLED_APPS comme indiqué ci-dessous :
# settings.py
INSTALLED_APPS = [
# ...
'django_ckeditor_5',
]Maintenant, ce serait tout pour la partie paramètres de la plupart des autres éditeurs WYSIWYG, mais CKeditor nécessite quelques configurations supplémentaires. Tout d’abord, si vous n’avez pas encore configuré l’emplacement des fichiers multimédias, ajoutez-les au bas de votre fichier de paramètres, comme indiqué :
import os
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')Ensuite, ajoutez un paramètre CKEDITOR_UPLOAD_PATH au fichier settings.py du projet. Pour utiliser CKEditor pour l’édition multimédia, vous devez spécifier le chemin d’accès à un dossier sur votre serveur Web où les fichiers multimédias contenant des images et d’autres contenus seront stockés.
CKEDITOR_UPLOAD_PATH = "uploads/"Ce paramètre spécifie un chemin relatif vers votre répertoire de téléchargement de médias CKEditor. Par défaut, Django utilise le backend de stockage du système de fichiers (il utilisera vos MEDIA_ROOT et MEDIA_URL).
Désormais, les images seront téléchargées dans un dossier de votre MEDIA_ROOT appelé « téléchargements » et les URL seront créées par rapport à MEDIA_URL.
Ouvrez le fichier urls.py maintenant et ajoutez django_ckeditor_5.urls à vos urlpatterns et apportez les autres modifications :
# 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)Ici, j’ai également rendu la vue accessible en ajoutant les emplacements MEDIA_URL et MEDIA_ROOT à la fin des urlpatterns, et les lignes ci-dessus sont les importations nécessaires pour que cela fonctionne.
Après avoir effectué toutes les étapes précédentes, vous pouvez enfin commencer à l’implémenter dans vos modèles ! Importez simplement CKEditor 5 dans vos modèles et placez CKEditor5Field à la place de tout autre champ de modèle. Voici un exemple :
# 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 Maintenant, si vous avez déjà enregistré cette classe de modèle dans le fichier admin.py, vous pourrez désormais voir l’éditeur WYSIWYG dans la zone d’administration. Créez simplement un compte superutilisateur dans votre projet Django et accédez au tableau de bord d’administration, vous devriez pouvoir voir CKEditor sur le champ de contenu de votre modèle :
Quelque chose comme ça. Comme vous pouvez le voir, il est très simple pour le moment et n’a pas de fonctionnalités majeures. C’est parce que nous n’avons pas encore défini quoi que ce soit pour lequel nous aimerions l’utiliser. Il y a beaucoup plus de choses que nous pouvons ajouter ou ajuster ; notre fichier settings.py est le point où la plupart de la personnalisation se produira.
Personnalisation
Maintenant place à la customisation ! La configuration de CKEditor 5 peut être modifiée à l’aide du fichier config.js ou créée dans la page lors de la création d’instances de CKEditor . mais nous vous recommandons de définir sa configuration sur la page lors de la création d’instances d’éditeur, car cela vous permet d’éviter de modifier les fichiers de distribution d’origine dans le dossier d’installation de CKEditor 5, ce qui facilite la mise à niveau.
Pour ce faire, utilisez le paramètre CKEDITOR_CONFIGS dans votre fichier settings.py qui spécifie tous les paramètres CKEditor que vous souhaitez mettre en direct dans votre éditeur. Ici, nous avons fait une configuration très basique de la barre d’outils de l’éditeur :
CKEDITOR_5_CONFIGS = {
'default': {
'toolbar': ['heading', '|', 'bold', 'italic', 'link',
'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
}
}Pour l’utiliser, nous devrions également le référencer dans nos modèles, ce qui pourrait être fait comme suit :
content = CKEditor5Field(config_name='default',null=True) Remarque : En spécifiant une option par défaut, elle sera appliquée à tous les objets même si vous n’avez pas défini de configurations spécifiques à la page.
Et maintenant, notre éditeur ressemblera à ceci :
Comme vous pouvez le voir, toutes les fonctions que nous avons spécifiées dans nos paramètres sont présentes ici. Mais cela manque encore un peu de fonctionnalités majeures. Si vous souhaitez créer une version entièrement personnalisée de votre éditeur, vous pouvez consulter leur catalogue de configuration CKEDITOR où ils ont spécifié toutes les variables de configuration de CKEditor.
Mais si vous souhaitez simplement ajouter toutes les fonctionnalités nécessaires, vous pouvez ajouter leurs configurations prédéfinies et les ajuster à votre guise. Juste après le code suivant au bas de votre fichier settings.py et vous êtes prêt à partir.
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' }
]
}
}
}Changez également le config_name dans vos modèles de default à extend :
content = CKEditor5Field(config_name='extends',null=True)Et cela ressemblerait à quelque chose comme ça une fois que vous avez terminé:
Vous pouvez voir que toutes les fonctionnalités nécessaires sont présentes ici ainsi que certaines très utiles telles que la possibilité d’insérer un tableau, des URL de médias, des blocs de code, des sous et des exposants, etc.
Conclusion
Dans cet article, nous avons couvert quelques bonnes raisons pour lesquelles vous devriez considérer CKEditor comme votre éditeur WYSIWYG de choix et comment vous pouvez l’implémenter dans votre site Django. Nous espérons que ces informations vous seront utiles lors du choix de la solution de gestion de contenu de votre site Web !
