Crie um app de escrita em Markdown com rascunhos locais e downloads

RichMarkdown, um aplicativo de escrita em funcionamento criado com o RichTextEditor

Crie um app para navegador que permita escrever visualmente, salve um rascunho local em Markdown e baixe um arquivo .md. Use esse fluxo de trabalho para rascunhos de documentação, arquivos README ou anotações pessoais.

Para ver um exemplo completo em funcionamento, abra o RichMarkdown. Ele usa o RichTextEditor e inclui anotações locais, trechos de pesquisa e opções de exportação. O produto é gratuito; licenciar o editor para o seu próprio app é uma decisão separada.

Comece com um editor funcionando

Baixe o editor e sirva a pasta richtexteditor pelo seu site. Execute a página por um servidor web local em vez de abrir uma URL file:. Carregue o núcleo e os plugins antes de criar uma instância. O guia de início rápido explica a configuração para cada framework.

Adicione um rascunho e uma ação de download

A página completa abaixo cria um editor chamado editor, um botão com id="download" e um elemento de status com id="save-status". Use uma chave estável diferente 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>

Escolha o que o Markdown precisa preservar

Teste documentos reais antes de escolher o Markdown como único formato de armazenamento. Títulos, listas, links, citações e blocos de código delimitados têm representações em Markdown. Células mescladas de tabelas, comentários e estilos arbitrários de fonte não têm uma correspondência direta em Markdown simples. Mantenha também HTML ou JSON estruturado se esses detalhes forem importantes.

O identificador de linguagem de um bloco de código descreve seu conteúdo; ele não executa, compila nem valida código. Mantenha os exemplos de JavaScript, TypeScript, PHP e C# como texto no documento.

Rascunhos locais são uma conveniência

  • O localStorage pertence a este navegador e a esta origem. Ele não é um backup, armazenamento criptografado nem sincronização entre dispositivos.
  • Limpar os dados do site remove os rascunhos. Ofereça uma ação de download e explique isso perto do editor.
  • Para vários documentos, use chaves separadas e uma lista de documentos. Coleções maiores podem precisar de IndexedDB.
  • Para equipes, use armazenamento no servidor com autenticação e resolva conflitos de edição. Uma chave local compartilhada não permite colaboração.

Antes de lidar com documentos de clientes

Autorize cada leitura e gravação no servidor. Trate o Markdown enviado como entrada não confiável. Se um servidor o converter em HTML, use um renderizador de Markdown e uma política de sanitização de HTML adequados ao local em que esse HTML será exibido. Uma prévia no navegador não substitui a validação no servidor.

Mantenha os arquivos de imagem separados e salve URLs estáveis. Um arquivo Markdown não inclui automaticamente as imagens que referencia. Veja como salvar texto rico com imagens.

Verifique o fluxo de trabalho

  1. Digite um título e uma lista e aguarde a mensagem de confirmação de salvamento.
  2. Recarregue a página e confirme que o rascunho reaparece.
  3. Adicione um bloco de código, baixe o arquivo e abra-o em um leitor de Markdown.
  4. Verifique o identificador de linguagem, a indentação, os links e as imagens.
  5. Desative o armazenamento do navegador; o download deve continuar disponível.

Continue com Word e Google Docs para Markdown, a demonstração interativa de Markdown e a validação de conteúdo obrigatório.

Leia a seguir