Czy jest jakaś dobra biblioteka lub kontrolka JavaScript Markdown? [Zamknięte]


89

Chcę zbudować witrynę, w której użytkownik może wprowadzać tekst i formatować go w Markdown. Powodem, dla którego chciałbym rozwiązania JavaScript jest to, że chcę wyświetlić podgląd na żywo, tak jak w StackOverflow.

Moja witryna nie jest jednak skierowana do programistów, więc kontrolka edytora byłaby idealna.

Rozumiem, że na StackOverflow używany jest edytor WMD.

Szybkie wyszukiwanie w Google powoduje również wyświetlenie biblioteki Showdown, która, jak sądzę, jest faktycznie używana przez broń masowego rażenia.

Są jakieś inne opcje? Czy WMD / Showdown to już świetne narzędzia? Jakie masz doświadczenia z różnymi opcjami?

Odpowiedzi:


33

Jeśli nie masz nic przeciwko używaniu Ajax do generowania podglądu na żywo, inną opcją jest markItUp! . markItUp! to uniwersalny edytor znaczników i bardzo elastyczny. Zapewnia łatwy sposób tworzenia edytora znaczników, ale w przeciwieństwie do WMD nie zapewnia własnego podglądu na żywo.

Użyłem markItUp! Wraz z prostym JSP (używając MarkdownJ ) dla jednego z moich projektów open-source ( wtyczka Markdown dla Roller ). Jeśli używasz innej technologii po stronie serwera, zastąp tę prostą stronę JSP stosownie do potrzeb.

Właściwie zacząłem używać tego, zanim natknąłem się na WMD. Zgadzam się, broń masowego rażenia jest świetna, ale dopiero co została udostępniona na zasadach open source i na tym etapie trudniej jest dostosować jej zachowanie.


MarkItUp! nie obsługuje przełączania i przyklejonego wyboru. To jest mój edytor tekstu Markdown o otwartym kodzie źródłowym oparty na JavaScript. Obsługuje skróty klawiaturowe, niestandardowe okna dialogowe, niestandardowe krople, a także obsługuje uporządkowane inteligentne zaznaczanie tekstu, aby zachęcić użytkowników do pisania składni Markdown w dobrym formacie: github.com/tovic/markdown-text-editor
Taufik Nurrohman

65

Jesteśmy bardzo zadowoleni z broni masowego rażenia. Jest w nim jednak kilka drobiazgów. Nic wielkiego, ale ja kocham jeśli John Fraser (autor) złożył otwarty kod źródłowy, dzięki czemu możemy rozwiązać niektóre z nich. Obiecał, że to zrobi, ale przeszkadzają mu inne projekty z prawdziwego życia.

Co tydzień kontaktuję się z Johnem. Opublikuję na blogu, gdy źródło broni masowego rażenia będzie już dostępne. Nie mogę skontaktować się z Johnem Fraserem od ponad roku.

Mamy otwarte źródła zarówno biblioteki JavaScript Markdown

http://code.google.com/p/pagedown/

i bibliotekę C # Markdown po stronie serwera

http://code.google.com/p/markdownsharp/


Dzięki za odpowiedź Jeff. Nawet nie zdawałem sobie sprawy, że broń masowego rażenia nie jest open source… Będę miał oczy szeroko otwarte.
webmat

2
Co zrobiłeś z ziejącą luką w zabezpieczeniach? Na przykład: <div onmouseover = "alert ('hi');"> cześć </div> Powyższe działa w wersji demonstracyjnej WMD!
andrewrk

1
@ superjoe30 To jest filtrowane na serwerze.
epochwolf

@ superjoe30: Zobacz meta.stackexchange.com/questions/95821/… - to samo dotyczy wersji JavaScript
balpha

1
@DisgruntledGoat patrząc na stackexchange.github.io widać, że jest na liście i ostatni popełnić wynosił 6 miesięcy temu (2015 już).
Loïc Faure-Lacroix

12

Polecam zaznaczone , który jest lekki, wydajny, łatwy w obsłudze i obsługuje GitHub Smakowe Markdown (GFM), jak również. Może być używany po stronie serwera (nodejs) lub klienta (przeglądarki).


oznaczony jest nadal rozwijany, a zminimalizowana wersja ma tylko 23 KB.
Peter T.

7

O ile wiem, tak naprawdę nie ma żadnego innego edytora Markdown opartego na przeglądarce, a przynajmniej żadnego tak rozbudowanego jak edytor WMD.

Showdown to konwerter Markdown w JS, który stanowi podstawę podglądu HTML WMD. Oba są stworzone przez http://attacklab.net/ .

O ile wiem, nie było żadnych poważnych skarg na oba (przynajmniej nie na liście mailingowej Markdown). Więc zrób to.



4

Strapdown.js, który został niedawno wydany , „sprawia, że ​​tworzenie eleganckich dokumentów Markdown jest żenująco proste. Nie jest wymagana kompilacja po stronie serwera”.



3

Pytanie jest teraz jeszcze bardziej starożytne, ale także jeszcze bardziej istotne, ponieważ większość wspomnianego kodu jest nieaktualna od kilku lat.

Jednak znalazłem kilka, które nadal wydają się aktualne:

Jquery-Markedit - To zostało rozwidlone z wmd-edit już jakiś czas temu i zrekonstruowane tak, aby używać jQuery. Na pierwszy rzut oka wygląda dobrze.

EpicEditor - jest nadal utrzymywany, ma elastyczny parser i, jak widać poniżej, autor jest bardzo responsywny (patrz poniżej). Wydaje się, że ma również dobrą dokumentację. Niestety nie działa z IE9.

MarkdownDeep to trzecia opcja, która jest nadal aktualna. Ciekawym punktem tego jest wsparcie dla Markdown Extra. Ma zależność od JQuery (właściwie można ją zaimplementować również bez JQuery). Oparta na wersji .NET, więc dokumentacja jest bardziej dostosowana do tej wersji niż wersja JS. Działa to również z IE9. Jest bardzo łatwy w użyciu (z JQuery) i bardzo prosty. O ile widzę, nie nastąpił w tym żaden znaczący rozwój.

js-markdown-extra to dość dokładny port biblioteki PHP i nadal jest w trakcie konserwacji. Obsługuje oczywiście Markdown Extra.


1
Podglądy na żywo działają dobrze z moim edytorem :) jako przykład otwórz pełny ekran lub po prostu uruchom preview()w trybie keydown lub po przekroczeniu czasu. Jest zbudowany do wszelkiego rodzaju dostosowań.
Oscar Godson

1
Tak więc pod edytorem tak to działa teraz. Po kliknięciu podglądu pokazuje ukryty podgląd, który jest aktualizowany o to, co napisałeś. Pełny ekran robi to (sorta) podczas pisania. Aby stworzyć własną przeglądarkę, możesz zrobić coś takiego: jsbin.com/otuyub/edit#javascript,html
Oscar Godson

1
Przechwycić? Możesz zrobić: editor.on('save', function(file) { console.log(file.content) })jeśli o to ci chodzi. To wypluje zawartość pliku za każdym razem, gdy plik zostanie zapisany.
Oscar Godson

1
Możesz także użyć on('update')zamiast zapisywać. Zapisywanie będzie dużo strzelać, jeśli masz włączone automatyczne zapisywanie. Aktualizacja uruchomi się tylko wtedy, gdy coś się zmieni. epiceditor.com/#events
Oscar Godson

1
Do Twojej wiadomości każdemu, kto to przeczyta: github.com/OscarGodson/EpicEditor/issues/137 - problem polega na tym, że próbowano go uruchomić lokalnie, a IE9 ma ograniczenia bezpieczeństwa przeciwko używaniu localStorage lokalnie za pośrednictwem pliku: \\\
Oscar Godson

2

Pytanie jest stare, ale mam nadzieję, że może to komuś pomóc. Niedawno opublikowałem działającą wersję mojego własnego edytora znaczników Javascript, uedit . Możesz znaleźć kod źródłowy tutaj . Działa na większości przeglądarek (w tym IE6 +) i nie zależy od żadnych zewnętrznych bibliotek JS.


2

Po wypróbowaniu kilku wtyczek w celu rozwiązania moich własnych potrzeb związanych z oferowaniem seudo-WYSIWYG MarkDown, zakończyłem wdrażanie własnej:

Może nie jest tak potężny, jak wszystkie komentowane tutaj rozwiązania, ale myślę, że żadne nie jest tak proste i łatwe do integracji i dostosowania .

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.