Code
L'Editor Markdown mostra il tuo codice e il documento finito uno accanto all'altro. Tutto ciò che scrivi appare subito nell'anteprima - titoli, elenchi, tabelle, elenchi di compiti, note a piè di pagina e formule - e un clic su qualsiasi testo nell'anteprima ti porta al suo punto nel codice. Puoi anche modificare il testo direttamente nell'anteprima. Così scrivi in fretta README, appunti, documentazione e articoli.
Tutto funziona nel tuo browser. I documenti non vengono caricati, non serve registrarsi e non c'è pubblicità.
Titoli, elenchi, link, codice, formule e HTML nei loro colori, numeri di riga, elenchi che continuano con Invio e un elenco chiaro dei problemi con la loro riga.
CommonMark con tabelle, elenchi di compiti, barrato, link automatici e note a piè di pagina. I titoli ricevono le stesse ancore che su GitHub, e i link verso di essi vengono controllati.
Formule nel testo in $…$ e formule in evidenza in $$…$$, composte con KaTeX direttamente nell'anteprima.
Fai clic su una frase, un titolo, una voce di elenco o una cella di tabella nell'anteprima e modificala lì - il Markdown segue, con i caratteri speciali protetti da escape.
Trascina un'immagine nell'editor e usala con . Le immagini restano insieme al documento nel tuo browser.
Un unico file HTML con le immagini incorporate, PDF tramite la finestra di stampa, testo semplice, oppure il Markdown con le sue immagini in ZIP.
Qualsiasi pagina https (e localhost) può integrare l'editor con un <iframe> e ?embed=1 - senza registrazione, senza chiave. Integrato, l'editor nasconde questo testo e mostra un pulsante Salva. Ci sono due modi per far entrare e uscire il documento.
src= apre un file (il tuo server deve consentire CORS), webhook= fa sì che «Salva» (Ctrl+S) invii il documento a quell'indirizzo. Aggiungi &token=… per un'intestazione Authorization: Bearer … e &auto per salvare dopo ogni modifica.
<iframe src="https://md.giit.ch/?embed=1&src=https://your-site.com/docs/notes.md&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>Il webhook riceve un POST con JSON { editor, event: "save", id, name, content, assets, updated }. Un piccolo script PHP che lo salva:
<?php
header('Access-Control-Allow-Origin: https://md.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/docs/$name.md", $d['content']);
echo '{"ok":true}';L'editor dice mdeditor:ready, la tua pagina risponde con mdeditor:load, l'editor segnala mdeditor:loaded, mdeditor:change alle modifiche reali e mdeditor:save quando l'utente salva. La tua pagina può inviare mdeditor:get (lo stato attuale) o mdeditor:save (premi Salva). Il salvataggio passa così dal tuo login e dalla tua sessione.
<iframe id="ed" src="https://md.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://md.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'mdeditor:ready') { // l'editor è pronto: passagli il documento
ed.contentWindow.postMessage({
type: 'mdeditor:load',
name: 'Notes',
content: await (await fetch('/docs/notes.md')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // immagini facoltative
}, ORIGIN);
}
if (m.type === 'mdeditor:change') document.title = '● not saved'; // una modifica reale
if (m.type === 'mdeditor:save') { // l'utente ha fatto clic su "Salva"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content, assets: m.assets }) });
document.title = 'Saved';
}
});
// Un pulsante Salva sulla tua pagina: la risposta arriva come mdeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'mdeditor:get' }, ORIGIN); }
</script>Assistente IA nella tua pagina: funziona anche nel riquadro. Con allow="clipboard-write" sull'iframe, «Copia il prompt» usa direttamente gli appunti (altrimenti l'editor ricorre al vecchio comando di copia, o mostra il prompt da copiare a mano). Un link inviato dall'IA non può raggiungere un editor dentro un altro sito web, quindi l'editor dice all'IA e all'utente di incollare invece l'intera risposta dell'IA nell'editor - oppure di aprire l'editor in una finestra propria.
window.open("https://md.giit.ch/?embed=window", "mdeditor-17") apre l'editor completo in una finestra propria e usa gli stessi messaggi con window.opener. Lì lo raggiungono i link di un'IA. mdeditor:load può portare anche context: { host, title, rules } - il prompt per l'IA dice allora a chi appartiene il documento e segue le tue regole - e hook: { url, token, assets: false }, un webhook solo per questo documento che non viene mai salvato. Chiudere la finestra con modifiche non salvate invia mdeditor:closing.
Passa all'editor il tuo prompt, un indirizzo sul tuo sito e una chiave per questa sessione dell'editor. La finestra dell'IA mostra allora «Connesso a» il tuo sito, ciò che dici all'IA e la scelta modificare il documento attuale o crearne uno nuovo; Copia il prompt mette tutto insieme. L'IA invia il risultato con la chiave al tuo server, e la tua pagina lo apre nell'editor - un nuovo documento si apre separatamente e resta nel browser dell'utente. Una chiave per sessione dell'editor: resta valida finché l'editor è aperto, e solo finché non ne ha una l'editor la chiede con mdeditor:key-request. L'editor non invia mai la chiave di sua iniziativa e non la salva mai; l'indirizzo deve essere https sul tuo host o su un suo sottodominio.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // una chiave per sessione dell'editor
const k = await key();
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', content, ai: {
label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// ricorda l'id da mdeditor:loaded e ignora change/save/closing con un altro id
// solo finché l'editor non ha una chiave:
if (m.type === 'mdeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'mdeditor:ai', key: k.key }, ORIGIN); }
// finché l'editor è aperto, avvisa il tuo server ogni minuto; chiudere l'editor o la pagina annulla la chiave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// il tuo server ha un risultato (polling, SSE …): target è "current" o "new"
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - la chiave di questa sessione dell'editor dell'utente connesso (la chiama la tua pagina)
session_start(); // verifica che l'utente possa modificare questo documento
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // o nel tuo database; ?alive= aggiorna seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - l'IA invia qui (niente intestazioni CORS: le IA lo chiamano da un server)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // il tuo database: non annullata, vista negli ultimi 3 minuti
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current'); // la tua pagina lo mostra con mdeditor:load
echo '{"ok":true}';Crea chiavi con almeno 128 bit casuali, salvane solo l'hash, lega ciascuna all'utente connesso, al documento e a questa sessione dell'editor, creane una per sessione, mantienila valida solo finché la tua pagina segnala la sessione come aperta, e annullala quando l'editor o la pagina si chiude.
L'intero protocollo è in llms.txt - dallo a un'IA e costruirà il collegamento per il tuo sistema. L'Editor LaTeX e l'Editor SVG funzionano allo stesso modo con i prefissi latexeditor: e svgeditor: - latex.giit.ch, svg.giit.ch.
No. L'editor funziona interamente nel tuo browser. I tuoi documenti e le tue immagini non vengono mai inviati a un server, a meno che tu stesso non configuri un webhook verso il tuo server.
CommonMark con le estensioni di GitHub: tabelle, elenchi di compiti, barrato, link automatici e note a piè di pagina, più le formule in $…$ e $$…$$. I titoli ricevono le stesse ancore che su GitHub, quindi link come [see below](#my-heading) funzionano.
Fai clic su «Esporta». Scegli PDF e fai clic su «Stampa / Salva come PDF» - nella finestra di stampa scegli «Salva come PDF». Oppure scegli Pagina HTML per un unico file con immagini e stili incorporati.
Trascina o incolla un'immagine nell'editor, oppure aggiungila nella scheda Immagini a destra. Viene salvata con il documento nel tuo browser e usata da .
Solo nel tuo browser. Fai clic sul pulsante a forma di cartella in alto a sinistra (I miei documenti) per aprirli, rinominarli, duplicarli, scaricarli o eliminarli. Cancellando i dati del sito nel browser spariscono, quindi scarica quelli che vuoi conservare - oppure lascia che l'editor li invii al tuo server («Salva sul server»).
Sì, qualsiasi IA - ChatGPT, Claude, Gemini, Copilot o l'IA del tuo strumento di programmazione. Fai clic su «Assistente IA», poi su «Copia il prompt», incollalo nella tua IA e dille cosa deve scrivere. L'IA risponde con un link; fai clic su di esso e il documento appare nel tuo editor. «Annulla» ritira ogni modifica.
Sì. Integralo con un iframe e scambia documenti con postMessage, oppure lascia che invii ogni versione salvata al tuo server con un webhook. Trovi esempi in Usare l'editor sul tuo sito web.
No. L'editor è gratuito, senza pubblicità e senza registrazione.