Edytor Markdown
Edytor Markdown to nowoczesne, łatwe w użyciu narzędzie do edycji plików Markdown. Dzięki integracji z edytorem SimpleMDE, użytkownicy mogą wygodnie formatować swoje dokumenty w czytelnym i intuicyjnym środowisku.
Kluczowe funkcje:
- Ładowanie plików Markdown – wczytaj swoje pliki bezpośrednio z dysku.
- Edytor z podglądem – intuicyjny edytor z podglądem na żywo.
- Zapisywanie zmian – pobierz zmodyfikowany plik Markdown na swój komputer.
- Wygodna nawigacja – proste i przejrzyste UI oparte na Bootstrapie.
Dlaczego warto używać Edytor Markdown?
Jak zacząć?
- Wybierz plik Markdown do edycji klikając przycisk Wybierz plik.
- Edytuj zawartość w wygodnym edytorze Markdown.
- Pobierz zmodyfikowany plik klikając Zapisz plik.
Wypróbuj już teraz i zobacz, jak proste może być tworzenie dokumentów w Markdown!
Kod po stronie przeglądarki
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<link rel="stylesheet" href="http://www.dariuszrorat.ugu.pl/assets/css/simplemde/wcag-light-fix.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<div class="mb-3">
<label for="fileInput" class="form-label">Wybierz plik Markdown</label>
<input class="form-control" type="file" id="fileInput"accept=".md" />
</div>
<div class="mb-3">
<label for="markdownEditor" class="form-label">Edytuj tekst Markdown</label>
<textarea id="markdownEditor"></textarea>
</div>
<button id="saveFile" class="btn btn-primary">Zapisz plik</button>
<script>
document.addEventListener("DOMContentLoaded", function() {
let simplemde = new SimpleMDE({
element: document.getElementById("markdownEditor"),
indentWithTabs: false,
showIcons: ['strikethrough', 'code', 'table', 'redo', 'heading', 'undo', 'clean-block', 'horizontal-rule'],
tabSize: 4
});
simplemde.codemirror.options.extraKeys['Tab'] = false;
simplemde.codemirror.options.extraKeys['Shift-Tab'] = false;
//WCAG missing form label fix
codemirrorTextareaIdFix("markdownEditor");
document.getElementById("fileInput").addEventListener("change", function(event) {
let file = event.target.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function(e) {
simplemde.value(e.target.result);
};
reader.readAsText(file);
}
});
document.getElementById("saveFile").addEventListener("click", function() {
let text = simplemde.value();
let blob = new Blob([text], { type: "text/markdown" });
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "edited_file.md";
a.click();
URL.revokeObjectURL(a.href);
});
});
</script>
Kod po stronie serwera
Informacja
Aplikacja nie korzysta z kodu po stronie serwera.