Есть ли хорошая библиотека или элемент управления Markdown Javascript?
Я хочу создать сайт, на котором пользователь может вводить текст и форматировать его в Markdown. Причина, по которой мне нужно решение Javascript, заключается в том, что я хочу отображать предварительный просмотр в реальном времени, как и в StackOverflow.
Однако мой сайт не ориентирован на разработчиков, поэтому элемент управления редактором был бы идеальным.
Я так понимаю, что на StackOverflow используется редактор WMD.
Быстрый поиск в Google также обнаруживает библиотеку Showdown, которая, я думаю, действительно используется WMD.
Есть ли другие варианты? WMD / Showdown уже являются отличными инструментами? Каковы были ваши впечатления от различных вариантов?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 10
Насколько мне известно, для Markdown действительно нет другого браузерного редактора, по крайней мере, такого обширного, как редактор WMD.
Showdown - это конвертер Markdown в JS, который составляет основу HTML-превью WMD. Они оба сделаны http://attacklab.net/.
И, насколько мне известно, не было никаких серьезных претензий к обоим (по крайней мере, не в списке рассылки Markdown). Так что дерзайте.
Я не тестировал это, но есть еще один вариант:
Мы очень довольны ОМП. Однако в нем есть несколько мелких ошибок. Ничего серьезного, но я бы люблю, если бы Джон Фрейзер (автор) сделал код открытым, чтобы мы могли исправить некоторые из них. Он обещал это сделать, но ему мешают другие проекты из реальной жизни.
Я общаюсь с Джоном каждую неделю. Я опубликую в блоге, как только источник ОМП станет наконец доступен. Я уже больше года не могу связаться с Джоном Фрейзером.
Мы открыли исходный код библиотеки JavaScript Markdown
http://code.google.com/p/pagedown/
и серверная библиотека C# Markdown
http://code.google.com/p/markdownsharp/
Спасибо за ответ Джефф. Я даже не понимал, что ОМП не является открытым исходным кодом ... Я буду следить за этим.
Что вы сделали с зияющей дырой в безопасности? Например: <div onmouseover = "alert ('hi');"> привет </div> Вышеупомянутое работает в демоверсии WMD!
@ superjoe30 Этот материал фильтруется на сервере.
@ superjoe30: см. meta.stackexchange.com/questions/95821/… - то же самое относится к версии JavaScript
PageDown все еще поддерживается? Будет ли он переведен на GitHub теперь, когда Google Code закрывается?
@DisgruntledGoat, глядя на stackexchange.github.io, вы можете увидеть, что он в списке, а последняя фиксация была 6 месяцев назад (уже 2015 год).
Если вы не прочь использовать Ajax для создания предварительного просмотра в реальном времени, то другой вариант - markItUp!. markItUp! это универсальный редактор разметки и очень гибкий. Он действительно обеспечивает простой способ создания редактора разметки, но, в отличие от WMD, он не предоставляет собственного предварительного просмотра в реальном времени.
Я использовал markItUp !, вместе с простым JSP (с использованием MarkdownJ) для одного из моих проектов с открытым исходным кодом (Плагин Markdown для Роликовый). Если вы используете другую серверную технологию, при необходимости замените этот простой JSP.
На самом деле я начал использовать это до того, как наткнулся на ОМП. Я согласен, WMD - это здорово, но он только что получил открытый исходный код, и на данном этапе его поведение сложнее настроить.
MarkItUp! не поддерживает переключение и закрепление выделения. Это мой текстовый редактор Уценка с открытым исходным кодом, основанный на JavaScript. Он поддерживает сочетания клавиш, настраиваемые диалоговые окна, настраиваемые перетаскивания, а также поддерживает некоторые средства интеллектуального выделения текста, чтобы побудить пользователей писать синтаксис Уценка в хорошем формате: github.com/tovic/markdown-text-editor
Есть один под названием Showdown, и в настоящее время он размещается здесь: https://github.com/coreyti/showdown
Вопрос древний, но, надеюсь, это может кому-то помочь. Я только что опубликовал рабочую версию моего собственного редактора разметки Javascript, уредактировать. Вы можете найти исходный код здесь. Он работает в большинстве браузеров (включая IE6 +) и не зависит от каких-либо внешних JS-библиотек.
Сейчас этот вопрос даже более древний, но еще более актуальный, поскольку большая часть упомянутого кода устарела на несколько лет.
Тем не менее, я нашел несколько, которые все еще кажутся актуальными:
JQuery-Markedit - это было разветвлено из wmd-edit некоторое время назад и переработано для использования jQuery. На первый взгляд кажется неплохим.
EpicEditor - тоже поддерживается, имеет гибкий парсер и, как вы можете видеть ниже, автор очень отзывчивый (см. Ниже). У ИТ-отдела тоже есть хорошая документация. К сожалению, не работает с IE9.
MarkdownDeep - третий вариант, который все еще актуален. Интересным моментом здесь является поддержка Markdown Extra. Имеет зависимость от JQuery (на самом деле вы также можете реализовать без JQuery). На основе версии .NET, поэтому документация более согласована с ней, чем версия JS. Это также работает с IE9. Это очень легко использовать (с JQuery) и очень просто. Насколько я могу судить, здесь не происходит значительного развития событий.
js-markdown-extra является довольно точным портом библиотеки PHP и все еще находится на обслуживании. Конечно, он поддерживает Markdown Extra.
Предварительный просмотр в реальном времени отлично работает с моим редактором :) Откройте полноэкранный режим в качестве примера или просто запустите preview() при нажатии клавиши или тайм-ауте. Он создан для любых настроек.
@OscarGodson спасибо, что указали на это +1 за то, что внимательно следили за происходящим! Есть ли пример этого в документации, я не мог его увидеть, хотя признаю, что у меня не было много времени на поиски. Возможно, я смогу еще раз взглянуть.
Нет конкретного примера того, что нет, потому что большинство людей используют либо переключение, либо полноэкранный режим, а не свое собственное средство предварительного просмотра. Однако, если вы дадите мне пример использования, я могу написать для вас пример.
Привет, спасибо Оскар. Мне нужен WIKI, который можно использовать на корпоративных рабочих столах с ограниченным доступом. Я пишу его как HTA (HTML-приложение), потому что оно дает права ОС и будет работать на любом рабочем столе Windows. Итак, что я хочу сделать, так это сохранить записи WIKI в файлах MD, и я хочу, чтобы у меня была возможность иметь предварительный просмотр в реальном времени, эфир под редактором или справа от него, когда позволяет пространство - для вашего примера, внизу, вероятно, было бы лучше, поскольку HTML проще. Этого достаточно? Рад сообщить больше.
Итак, под редактором, как это работает сейчас. После того, как вы нажмете на предварительный просмотр, появится скрытый предварительный просмотр, который обновится с учетом того, что вы написали. Полноэкранный режим делает это (вроде как) по мере ввода. Чтобы создать свой собственный предварительный просмотр, вы можете сделать что-то вроде этого: jsbin.com/otuyub/edit#javascript,html
Это поместит сгенерированный HTML в новый блок предварительного просмотра, который я сделал в качестве примера. Он должен работать, просто щелкнув по рендерингу и начав печатать. Если вы перезагрузите страницу, блок предварительного просмотра должен загрузить обновленный предварительный просмотр.
Не могу сейчас зайти на jsbin.com, он не отвечает. Попробую позже.
Привет, Оскар, я согласился, но у меня был только шанс быстро взглянуть. На то, чтобы вернуться к этому, у меня может уйти несколько дней, так как в данный момент я довольно сильно привязан. Я сообщу вам, когда у меня будет еще одна попытка. Одна маленькая мысль, которую я хотел проверить. Могу ли я перехватить функцию СОХРАНИТЬ? Мне нужно сохранить локально, а не через AJAX.
Перехватить? Вы можете сделать: editor.on('save', function(file) { console.info(file.content) }), если вы это имеете в виду. Это будет выплевывать содержимое файла всякий раз, когда файл будет сохранен.
Кроме того, вы можете использовать on('update') вместо save. Сохранение будет много работать, если у вас включено автосохранение. Обновление сработает только при изменении чего-либо. epiceditor.com/#events
Брилл, я займусь этим, как только у меня будет время. Надеюсь в ближайшие пару дней.
Хорошо, я пробовал это - одна проблема, я не могу заставить его работать в Firefox 11. На самом деле, хотя ваша домашняя страница работает, простой пример - нет, ничего не отображается вообще. Однако в Chrome это работает. Итак, чтобы уточнить. Ни пример в jsbin, ни простая настройка не работают в FF, но ваша домашняя страница работает.
Хорошо, я беру это обратно. Похоже, что NoScript слишком "полезен"! Я выключил его, и теперь вроде все работает.
Grrr, ошибка IE9: «SCRIPT5007: Невозможно получить значение свойства« epiceditor »: объект равен нулю или не определен» «epiceditor.js, строка 1135, символ 5» также в строке 1000. var files = JSON.parse(localStorage[this.settings.localStorageName]);
К сведению всех, кто читает это: github.com/OscarGodson/EpicEditor/issues/137 - проблема в том, что он пытался запускаться локально, а IE9 имеет ограничения безопасности на использование localStorage локально через файл: \\\
Попробовав несколько плагинов для решения моих собственных потребностей в предложении Seudo-WYSIWYG MarkDown, я закончил реализацию своего собственного:
Возможно, это не так мощно, как все прокомментированные здесь решения, но я думаю, что ни одно из них не сравнится с просто и легко интегрировать и настраивать.
Strapdown.js, который назывался недавно выпущенный, «упрощает создание элегантных документов Markdown. Компиляция на стороне сервера не требуется».
Я бы порекомендовал отмечен, который является легким, эффективным, простым в использовании и также поддерживает GitHub Flavored Markdown (GFM). Его можно использовать как на стороне сервера (nodejs), так и на стороне клиента (браузер).
Маркировка все еще находится в разработке, а размер уменьшенной версии составляет всего 23 КБ.