django-tinymce : éviter la réécriture des URL et le base64

Lorsque vous stockez du HTML enrichi — par exemple la description d’un produit — dans un HTMLField de django-tinymce, deux comportements par défaut de TinyMCE peuvent modifier discrètement votre contenu : les URL sont transformées en chemins relatifs et les images collées sont intégrées sous forme d’URI de données en base64. Ces deux problèmes se corrigent dans TINYMCE_DEFAULT_CONFIG, à condition de savoir quel paramètre intervient réellement.

Problème n° 1 : TinyMCE réécrit vos URL

Par défaut, TinyMCE convertit les URL présentes dans votre contenu. Un lien absolu saisi sous la forme https://example.com/page peut ainsi revenir sous la forme d’un chemin relatif comme ../../page. Les liens cessent alors de fonctionner dès que le HTML enregistré est affiché ailleurs que sur la page où il a été créé : une autre route, un e-mail, une réponse d’API ou un flux.

Les paramètres des URL, et celui qui compte vraiment

Trois paramètres contrôlent ce comportement, selon une logique en plusieurs niveaux — leur ordre est important :

• convert_urls (true par défaut) est l’interrupteur principal. Lorsqu’il vaut true, TinyMCE convertit les URL. Lorsqu’il vaut false, il conserve chaque URL exactement telle qu’elle a été saisie — sans conversion, qu’elle soit relative ou absolue.
• relative_urls (true par défaut) n’agit que lorsque convert_urls vaut true. La valeur true rend les URL relatives ; la valeur false les force au format absolu.
• remove_script_host (true par défaut) ne s’applique lui aussi que lors d’une conversion au format absolu : il détermine si le protocole et l’hôte sont supprimés.

Le paramètre décisif est donc convert_urls: False. Définissez-le ainsi pour conserver les URL telles quelles ; relative_urls et remove_script_host n’ont alors plus d’incidence. Si vous souhaitez conserver la conversion tout en obtenant systématiquement des URL absolues avec l’hôte complet, gardez convert_urls: True et définissez relative_urls: False, remove_script_host: False. Ne comptez pas uniquement sur relative_urls: False si convert_urls vaut toujours true et que vous voulez empêcher toute réécriture : la réponse simple pour « laisser mes URL tranquilles » est convert_urls: False.

TINYMCE_DEFAULT_CONFIG = {
    # ... your other options ...
    "convert_urls": False,        # decisive: no URL rewriting at all
    "relative_urls": False,       # only relevant if convert_urls is True
    "remove_script_host": False,  # only relevant when producing absolute URLs
}

Problème n° 2 : les images collées deviennent du base64

Par défaut, lorsque vous collez ou faites glisser directement une image dans l’éditeur TinyMCE et qu’aucun gestionnaire de téléversement n’est configuré, TinyMCE intègre l’image dans le HTML sous forme d’URI de données en base64. La description reste parfaitement normale dans l’éditeur, mais le balisage enregistré contient désormais l’image entière encodée sous forme de texte.

C’est un vrai problème pour une description enregistrée : le champ HTML augmente fortement en taille (une seule image peut représenter plusieurs centaines de Ko en base64), les limites de la colonne en base de données peuvent être atteintes, les requêtes et le chargement des pages sont ralentis, l’image ne peut pas être diffusée depuis un CDN ni mise en cache séparément, et elle est dupliquée partout où la description est réutilisée.

Comment empêcher l’intégration en base64

La solution consiste à fournir à TinyMCE un emplacement vers lequel téléverser les images, afin qu’il remplace le bloc base64 par une véritable URL :

1. Configurez un point d’accès de téléversement avec images_upload_url (ou un gestionnaire personnalisé via images_upload_handler). Lorsque automatic_uploads est activé (ce qui est le cas par défaut), TinyMCE envoie le fichier image à votre point d’accès avec une requête POST et remplace le base64 par l’URL renvoyée.
2. Faites en sorte que ce point d’accès enregistre le fichier (dans votre stockage de médias ou votre stockage d’objets), puis renvoie l’URL publique au format JSON attendu par TinyMCE ({ "location": "https://..." }).
3. Si vous préférez refuser complètement les images intégrées, définissez paste_data_images: False afin que les images collées sous forme d’URI de données soient supprimées au lieu d’être intégrées.

La règle générale : si une description doit être enregistrée puis réutilisée, ne laissez jamais les images au format base64 — faites-les passer par un gestionnaire de téléversement afin que le champ contienne une URL et non l’intégralité du fichier.

Ce sont précisément le genre de paramètres par défaut discrets qui ne génèrent aucune erreur : ils altèrent simplement vos données enregistrées jusqu’à ce qu’un autre maillon du système cesse de fonctionner. Dans le cadre de mon travail, je conçois et je débogue des backends Django ainsi que des chaînes de traitement de contenu. Si vous avez besoin d’aide pour un backend ou un logiciel personnalisé, consultez les services de Netalith ou contactez-moi directement sur LinkedIn.