Créer une application de rédaction Markdown avec brouillons locaux et téléchargements

RichMarkdown, une application de rédaction en ligne créée avec RichTextEditor

Créez une application web qui permet de rédiger dans un éditeur visuel, enregistre un brouillon Markdown local et télécharge un fichier .md. Utilisez ce processus pour des brouillons de documentation, des fichiers README ou des notes personnelles.

Pour un exemple complet en ligne, ouvrez RichMarkdown. Cette application utilise RichTextEditor et propose aussi des notes locales, des extraits de recherche et des options d’exportation. Son utilisation est gratuite ; la licence de l’éditeur pour votre propre application relève d’une décision distincte.

Commencez avec un éditeur fonctionnel

Téléchargez l’éditeur et servez son dossier richtexteditor depuis votre site. Exécutez la page via un serveur web local plutôt que d’ouvrir une URL file:. Chargez le noyau et les extensions avant de créer une instance. Le guide de démarrage rapide détaille la configuration propre à chaque framework.

Ajoutez un brouillon et une action de téléchargement

La page complète ci-dessous crée un éditeur nommé editor, un bouton avec id="download" et un élément d’état avec id="save-status". Utilisez une clé stable différente pour chaque document.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"></div>
<button id="download" type="button">Download .md</button>
<p id="save-status" role="status"></p>
<script>
const editor = new RichTextEditor("#editor");
const status = document.getElementById("save-status");
const key = "my-markdown-draft";
let saved = "";
try { saved = localStorage.getItem(key) || ""; }
catch { status.textContent = "Browser storage is unavailable. Download a copy."; }
editor.fromMarkdown(saved || "# Untitled\n\nStart writing.");

function saveDraft() {
  try {
    localStorage.setItem(key, editor.toMarkdown());
    status.textContent = "Saved in this browser.";
  } catch {
    status.textContent = "Draft could not be saved. Download a copy.";
  }
}
let timer;
editor.attachEvent("change", function () {
  clearTimeout(timer);
  timer = setTimeout(saveDraft, 300);
});
window.addEventListener("pagehide", saveDraft);

document.getElementById("download").addEventListener("click", function () {
  const blob = new Blob([editor.toMarkdown()], {
    type: "text/markdown;charset=utf-8"
  });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "document.md";
  document.body.appendChild(link);
  link.click();
  link.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
});
</script>

Choisissez ce que Markdown doit conserver

Testez des documents réels avant de choisir Markdown comme unique format d’enregistrement. Les titres, listes, liens, citations et blocs de code délimités ont une représentation en Markdown. Les cellules de tableau fusionnées, les commentaires et les styles de police arbitraires se transposent mal en Markdown simple. Conservez aussi du HTML ou du JSON structuré si ces détails comptent.

L’étiquette de langage d’un bloc de code décrit son contenu ; elle n’exécute, ne compile ni ne valide le code. Conservez les exemples JavaScript, TypeScript, PHP et C# sous forme de texte dans le document.

Les brouillons locaux sont une commodité

  • localStorage est propre à ce navigateur et à cette origine. Ce n’est ni une sauvegarde, ni un stockage chiffré, ni une synchronisation entre appareils.
  • Effacer les données du site supprime les brouillons. Proposez une action de téléchargement et expliquez ce comportement près de l’éditeur.
  • Pour plusieurs documents, utilisez des clés distinctes et une liste de documents. Les collections plus volumineuses peuvent nécessiter IndexedDB.
  • Pour les équipes, utilisez un stockage serveur avec authentification et résolvez les conflits de modification. Une clé locale partagée ne constitue pas un outil de collaboration.

Avant de traiter les documents de vos clients

Vérifiez les autorisations pour chaque lecture et écriture côté serveur. Traitez le Markdown envoyé comme une entrée non fiable. Si un serveur le transforme en HTML, utilisez un moteur de rendu Markdown et une politique d’assainissement HTML adaptés à l’endroit où ce HTML s’affiche. Un aperçu dans le navigateur ne remplace pas la validation côté serveur.

Conservez les fichiers image séparément et enregistrez des URL stables. Un fichier Markdown n’inclut pas automatiquement les images auxquelles il fait référence. Consultez l’enregistrement de texte enrichi avec des images.

Vérifiez le processus

  1. Saisissez un titre et une liste, puis attendez le message de confirmation de l’enregistrement.
  2. Rechargez la page et vérifiez que le brouillon réapparaît.
  3. Ajoutez un bloc de code, téléchargez le fichier et ouvrez-le dans un lecteur Markdown.
  4. Vérifiez l’étiquette de langage, l’indentation, les liens et les images.
  5. Désactivez le stockage du navigateur ; le téléchargement doit rester disponible.

Poursuivez avec Word et Google Docs vers Markdown, la démonstration interactive de Markdown et la validation du contenu obligatoire.

À lire ensuite