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.
źródło
diva pasek narzędzi jest innydiv, mogą to być jedyne rzeczy na stronie. Rozwiązanie Ahola spełnia Twoje wymagania dotyczące „minimalnego zestawu opcji formatowania (B, I, U, listy itp.), A obszar wprowadzania tekstu powinien pokazywać przekonwertowany kod Markdown, a nie surowy kod”. Czy możesz dokładniej wyjaśnić, dlaczego nie jest to rozwiązanie, które weźmiesz pod uwagę.Odpowiedzi:
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.
źródło
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źć.
źródło
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).
źródło
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.
źródło
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ę:
readyi dalejpage:load, ponieważ Railsy używają TurbolinkówajaxCompleteponieważ używam Ajax do raportów o błędach formularzyhallo.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 .
źródło
wysiwyg.js, ale nie odniosłem żadnego wielkiego sukcesu. Zastanawiasz się, czy masz również gdzieś ukryty w tekście towarzyszący kod HTML? Lista stabilnych wersji zależności itp.? Dzięki!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.
źródło