Crea una aplicación de escritura Markdown con borradores locales y descargas

RichMarkdown, una aplicación de escritura en funcionamiento creada con RichTextEditor

Crea una aplicación web que permita escribir de forma visual, guarde un borrador Markdown local y descargue un archivo .md. Usa este flujo para borradores de documentación, archivos README o notas personales.

Para ver un ejemplo completo en funcionamiento, abre RichMarkdown. Usa RichTextEditor y añade notas locales, fragmentos de investigación y opciones de exportación. El producto es gratuito; adquirir una licencia del editor para tu propia aplicación es una decisión aparte.

Empieza con un editor que funcione

Descarga el editor y sirve su carpeta richtexteditor desde tu sitio. Ejecuta la página mediante un servidor web local en lugar de abrir una URL file:. Carga el núcleo y los complementos antes de crear una instancia. La guía de inicio rápido explica la configuración específica de cada framework.

Añade un borrador y una acción de descarga

La página completa crea un editor llamado editor, un botón con id="download" y un elemento de estado con id="save-status". Usa una clave estable distinta para cada documento.

<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>

Elige qué debe conservar Markdown

Prueba documentos reales antes de elegir Markdown como único formato de almacenamiento. Los encabezados, las listas, los enlaces, las citas y los bloques de código delimitados tienen representaciones en Markdown. Las celdas combinadas de tablas, los comentarios y los estilos de fuente arbitrarios no se trasladan bien a Markdown simple. Conserva también HTML o JSON estructurado si esos detalles importan.

La etiqueta de lenguaje de un bloque de código describe su contenido; no ejecuta, compila ni valida el código. Mantén los ejemplos de JavaScript, TypeScript, PHP y C# como texto en el documento.

Los borradores locales son una comodidad

  • localStorage pertenece a este navegador y a este origen. No es una copia de seguridad, almacenamiento cifrado ni sincronización entre dispositivos.
  • Borrar los datos del sitio elimina los borradores. Ofrece una acción de descarga y explícalo cerca del editor.
  • Para varios documentos, usa claves independientes y una lista de documentos. Las colecciones más grandes pueden necesitar IndexedDB.
  • Para equipos, usa almacenamiento en el servidor con autenticación y resuelve los conflictos de edición. Una clave local compartida no permite colaborar.

Antes de gestionar documentos de clientes

Comprueba la autorización de cada lectura y escritura en el servidor. Trata el Markdown enviado como una entrada no confiable. Si un servidor lo convierte en HTML, usa un renderizador Markdown y una política de saneamiento de HTML adecuados al lugar donde se mostrará ese HTML. Una vista previa en el navegador no sustituye la validación en el servidor.

Guarda los archivos de imagen por separado y conserva URL estables. Un archivo Markdown no incluye automáticamente las imágenes a las que hace referencia. Consulta cómo guardar texto enriquecido con imágenes.

Comprueba el flujo

  1. Escribe un encabezado y una lista, y espera el mensaje de confirmación de guardado.
  2. Recarga la página y confirma que el borrador vuelve a aparecer.
  3. Añade un bloque de código, descarga el archivo y ábrelo en un lector Markdown.
  4. Comprueba la etiqueta de lenguaje, la sangría, los enlaces y las imágenes.
  5. Desactiva el almacenamiento del navegador; la descarga debe seguir disponible.

Continúa con Word y Google Docs a Markdown, la demostración interactiva de Markdown y la validación de contenido obligatorio.

Para seguir leyendo