Zintegrowany edytor tekstu Markdown WYSIWYG

Szukając prostego edytora WYSIWYG dla kodu Markdown, nie znajduję interfejsu użytkownika porównywalnego z CkEditor, TinyMCE, itd.

Konkretnie, Markdown „WYSIWYG” redaktorzy, które często są zalecane (takie jak wiadomości, takich jak ten ) nie są czystymi edytory WYSIWYG w tym sensie, że użytkownicy albo jeszcze napisać surowego Markdown ( MarkItUp ) lub przejść do drugiej skrajności posiadania w linii edycji bez standardowe sterowanie ( Hallo ).

Potrzebuję czegoś pomiędzy.

Szukam edytora Markdown, który wygląda i działa jak uproszczone pole tekstowe CkEditor i który akceptuje i wyświetla Markdown. Powinien istnieć pasek narzędzi z minimalnym zestawem opcji formatowania (B, I, U, listy, itd.), A obszar wprowadzania tekstu powinien pokazywać przekonwertowany kod Markdown, a nie surowy kod. Powinien istnieć przycisk Źródło, który pozwoli użytkownikom edytować nieprzetworzony Markdown, ale nawet to jest opcjonalne. Dawny:

Mam powód dla Markdown / wiki, itd. - bezpieczeństwo, które oferuje. Nie mam nic przeciwko wprowadzaniu surowego kodu, jak tutaj w SE, ale moi użytkownicy nie są maniakami i nie uważają tego za przyjemne. Nie chcą widzieć * * * ___ i spacji w tekście. Są używane do edycji w stylu „Word” i są najbardziej produktywne w tym środowisku.

A więc - czy istnieje naprawdę zintegrowany edytor WYSIWYG dla Markdown? Piszę w PHP, więc coś, co mogę wywołać z klasą, byłoby idealne.

Aktualizacja z 23 września 2015 r

CKEditor ma teraz dodatek Markdown, który robi dokładnie to samo. Projekt dodatku jest hostowany na github .

Zrzuty ekranu:

Aktualizacja z 13 kwietnia 2015 r.
Ktoś, kto twierdzi, że opracuje CKEditor, mówi, że pojawienie się CommonMark zmienia zasady gry i prawdopodobnie moglibyśmy zobaczyć odpowiedni interfejs znaczników dla CKEditor (przeczytaj komentarze do pełnej historii).

Aktualizacja z 6 lutego 2015 r

CKEditor jest teraz dostarczany z wtyczką, która wysyła (i akceptuje jako dane wejściowe) BBCode.

Demo: http://ckeditor.com/demo#bbcode

Badałem ten temat niedawno i nie znalazłem żadnego przyzwoitego edytora WYSIWYG z wyjściem Markdown. W rzeczywistości, najpierw musisz stworzyć edytor WYSIWG Markdown to edytor HTML WYSIWG, a na rynku jest ich tylko kilka.

Jest szansa, że ​​będziesz mógł stworzyć dataProcessordla CKEditor, który zmieni edytor HTML w edytor Markdown. Mamy wtyczkę do BBCode, która działa w ten sposób (sprawdź http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Wszystko, co musisz zrobić, to zaimplementować ten interfejs http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Jeśli sprawdzisz kod wtyczki BBCode, zobaczysz kilka trików i trików, ponieważ niestety obecna architektura CKEditor nie jest (jeszcze) gotowa do stworzenia takiego procesora danych. Uważam jednak, że jeśli chcesz zapewnić tylko kilka opcji stylizacji, powinieneś być w stanie wdrożyć obsługę Markdown dość szybko.

Odpowiedzią może być SimpleMDE , nowicjusz. Od miesiąca szukam czegoś takiego. Dziwię się, że nie pojawia się to wyżej w wynikach wyszukiwania. Musiałem przejrzeć ogłoszenie na lepture / redaktorze, żeby to znaleźć.

EDYCJA 23 września 2015 r

CKEditor ma teraz dodatek Markdown, który robi dokładnie to samo. Projekt dodatku jest hostowany na github .

Zrzuty ekranu:

Jak napisałem w mojej aktualizacji z 6 lutego 2015 r., CKEditor zawiera teraz wtyczki, które pozwalają na wejście i wyjście BBCode.

Demo jest dostępne tutaj: http://ckeditor.com/demo#bbcode

EDYCJA 13 kwietnia 2015 r .:
Ktoś, kto twierdzi, że opracuje CKEditor, mówi, że pojawienie się CommonMark zmienia zasady gry i prawdopodobnie moglibyśmy zobaczyć odpowiedni interfejs znaczników dla CKEditor (przeczytaj komentarze do pełnej historii).

Pióro to nowy (aktywny od 2014 r.) Edytor WYSIWYG, który generuje Markdown .
Nie jest doskonały - miałem problemy z wklejaniem tam kodu HTML - ale działa.

Edycja: Przepraszamy! Nie wyświetla Markdown. Walery Strauch zwrócił uwagę w komentarzach, że znaki formatowania Markdown, które widziałem, były w rzeczywistości regułami pseudoelementów CSS:

Mimo to zostawię to tutaj jako opcję, ponieważ niektórzy ludzie głosowali za tą odpowiedzią i może się to komuś przydać.

Zaimplementowałem bardzo prosty edytor, który pozwala <textarea>edytować zawartość pliku zawierającego Markdown w sposób WYSIWYG.

Użyłem Hallo . Nie sądzę, by jego strona internetowa jasno wskazywała, że ​​sama nie jest edytorem Markdown WYSIWYG, ale wersja demonstracyjna wytycza do niego ścieżkę.

Hallo umożliwia edycję WYSIWYG HTML wewnątrz pliku <div>. Użyłem javascript, aby ukryć wszystkie <textarea>bloki, które mają określoną wysiwygklasę CSS, zastępując ją a <div>i kopiując zawartość <textarea>do <div>. Kopiowanie przebiega przez Showdown który tworzy HTML z Markdown.

Kolejna procedura Javascript reaguje za każdym razem, gdy <div>zmienia się zawartość. Kopiuje zawartość z powrotem do (teraz ukrytego) <textarea>. Treść jest przesyłana do przeceny do celu konwersji z HTML do Markdown.

Jeśli <textarea>jest polem w<form >, edytowana Markdown zostanie wysłana na serwer po przesłaniu tego formularza.

Inspiracją do tego jest przykład Hallo Markdown , a konkretnie plik editor.js . Użyłem tego jako podstawy dla mojego własnego skryptu wraz z hallo.js , showdown.js i to-markdown.js .

Mój skrypt wysiwyg.js jest pochodną pliku editor.js z przykładu Hallo Markdown . Kilka punktów, na które należy zwrócić uwagę:

• Używam tego w aplikacji Railsowej (nie to ma znaczenia)
• Działa dalej readyi dalej page:load, ponieważ Railsy używają Turbolinków
• Działa dalej, ajaxCompleteponieważ używam Ajax do raportów o błędach formularzy
• Istnieją inne zależności: JQueryUI i Rangy (użytkownicy Railsów mogą skorzystać z gems jquery-ui-rails i rangy-rails ).
• Również Font Awesome jest używany w ikonach paska narzędzi. Wersja hallo.jsużywanej przez demo jest nieaktualna (używa starej wersji Font Awesome ) - zamiast tego użyj hallo.js z GitHub .

Musisz tylko dodać CSS class='wysiwyg'do dowolnego, <textarea>aby włączyć na nim WYSIWYG. <textarea>Powinny conain Markdown sformatowanego tekstu.

Spodziewałbym się, że wysiwyg.js można łatwo zaadaptować do używania innego edytora, jeśli nie lubisz Hallo, o ile działa na HTML w a <div>. Jest kilka do wyboru, ale nie wszystkie są tak lekkie jak Hallo .

Podobna praca, którą znalazłem, to format markdown-html . Używa tego samego Showdown i to-markdown .

Szukam także edytora promocji, który jest opisany na początku tego wątku

Czy widziałeś „narzędzia przeceny”: http://md-wysiwyg.sourceforge.net/

Próbny: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Wydaje się, że jest to bardzo zbliżone do tego, czego szukamy, wykonuje rozsądną robotę polegającą na pobieraniu tekstu sformatowanego w trybie WYSIWYG i wyświetlaniu przecen. Jednak nie powiodło się w przypadku wyjątku kodowania, gdy wkleiłem tekst sformatowany z dokumentu Google.