Интегрированный текстовый редактор Markdown WYSIWYG

в поисках простого редактора WYSIWYG для кода Markdown я не нахожу сопоставимого пользовательского интерфейса с CKEditor, TinyMCE и т. д.

в частности, Редакторы Markdown "WYSIWYG", которые часто рекомендуются (например, такие сообщения, как этой) не являются чистыми редакторами WYSIWYG в том смысле, что пользователи либо все еще пишут raw Markdown (MarkItUp) или перейти к другой крайности наличия встроенного редактирования без стандартных элементов управления (Алло ).

Мне нужно что-то между.

Я ищу редактор Markdown, который выглядит и функционирует как урезанное текстовое поле CkEditor, и который принимает и выводит Markdown. Должна быть панель инструментов с минимальным набором параметров форматирования (B, I, U, lists, ect), а в области ввода текста должна отображаться преобразованная уценка, а не необработанный код. Должна быть кнопка Source, которая позволит пользователям редактировать необработанную уценку, но даже это необязательно. Например:

Я понимаю причину Markdown / wiki, ect - безопасность, которую он предлагает. Я не против ввода raw-кода, как здесь, в SE, но мои пользователи не являются выродками и не находят это приятным. Они не хотят видеть * * * _ _ _ и пробелы, смешанные с их текстом. Они используются для редактирования стиля "Word" и наиболее продуктивны в этой среде.

Итак-есть ли действительно интегрированный редактор WYSIWYG для Markdown? Я пишу на PHP, так что то, что я могу вызов с классом был бы идеальным.

23 Сентября 2015 Обновление

CKEditor теперь имеет Markdownаддон это делает эту точную вещь. Проект аддона-это размещено на github.

скриншоты:

Апр 13, 2015 Обновление
Кто-то, претендующий на разработку CKEditor, говорит, что внешний вид CommonMark это игра-чейнджер, и мы могли бы увидеть правильную интерфейс разметки для CKEditor (читайте комментарии для полной истории).

6 Февраля 2015 Обновление

CKEditor теперь поставляется с плагином, который выводит (и принимает в качестве входного) BBCode.

демо: http://ckeditor.com/demo#bbcode

6 96
wysiwyg r-markdown ckeditor richtextbox

6 ответов:

Я исследовал эту тему на днях, и я не нашел ни одного приличного редактора WYSIWYG с выводом Markdown. На самом деле, сначала вам нужно создать редактор Wysiwg Markdown-это редактор WYSIWG HTML, и их всего несколько, которые можно использовать на рынке.

есть шанс, что вы сможете создать dataProcessor для CKEditor, который изменит редактор HTML в Редактор Markdown. У нас есть плагин для BBCode, который работает следующим образом (проверьте http://nightly-v4.ckeditor.com/3737/samples/bbcode.html).

все, что вам нужно сделать, это реализовать этот интерфейс http://nightly-v4.ckeditor.com/ckeditor_api/#! / api / CKEDITOR.dataProcessor. Если вы проверите код плагина BBCode, вы увидите некоторые хаки и трюки, потому что, к сожалению, текущая архитектура CKEditor еще не готова (пока) создать такой процессор данных. Тем не менее, я считаю, что если вы хотите предоставить только несколько вариантов стиля, вы должны быть в состоянии реализуйте поддержку Markdown довольно быстро.

12

SimpleMDE, новичок, может быть ответ. Я искал что-то подобное уже месяц. Я удивлен, что это не отображается выше в результатах поиска. Я должен был пройти через уведомление на лептура / редактор найти это.

enter image description here

28

редактировать 23 сентября 2015

CKEditor теперь имеет Markdownаддон это делает эту точную вещь. Проект аддона-это размещено на github.

скриншоты:

markdown WYSIWYG

markdown source

Как опубликовано в моем обновлении 6 февраля 2015 года,CKEditor теперь включает в себя плагины, которые позволяют BBCode ввода и вывода.

A демо доступно здесь:http://ckeditor.com/demo#bbcode

EDIT Apr 13, 2015:
Кто-то, претендующий на разработку CKEditor, говорит, что внешний вид CommonMark это игра-чейнджер, и мы могли бы увидеть правильную интерфейс разметки для CKEditor (читайте комментарии для полной истории).

9

Pen это новый (активный с 2014 года) редактор WYSIWYG, который выходы Markdown.
Это не идеально-у меня были проблемы с вставкой HTML там-но это работает.

Edit: Извините! Он не выводит уценку.Walery Штраух указал в комментариях, что знаки форматирования Markdown, которые я видел, на самом деле были правилами псевдо-элемента CSS:

тем не менее, я буду оставьте его здесь как вариант, так как некоторые люди поддержали этот ответ, и он, возможно, был кому-то полезен.

8

Я также ищу редактор markdown, который описан в верхней части этой темы

вы видели "инструменты уценки": http://md-wysiwyg.sourceforge.net/

демо: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Это кажется довольно близким к тому, что мы ищем, он делает разумную работу, принимая ваш WYSIWYG rich text и выводя markdown. Однако это не удалось на исключение кодировки, когда я вставлен в какой-то форматированный текст из документа google.

3

я реализовал очень простой редактор, который позволяет содержимое <textarea> который содержит уценку для редактирования в WYSIWYG моды.

Я Алло. Я не думаю, что его веб-сайт делает очевидным, что это не сам редактор Markdown WYSIWYG, а демо действительно подделывает путь к одному.

Алло позволяет WYSIWYG редактирование HTML внутри <div>. Я использовал javascript, чтобы скрыть любой <textarea> блоки, которые имеют специфический wysiwyg CSS-класс, заменив его <div> и копирование содержимого <textarea> на <div>. Копирование выполняется через разборки который производит HTML из Markdown.

другая процедура Javascript реагирует каждый раз, когда <div> содержание меняться. Он копирует содержимое обратно в (теперь скрытый) <textarea>. Содержимое выполняется через to-markdown для преобразования из HTML в Markdown.

если <textarea> поле в <form>, затем отредактированная уценка будет отправлена на сервер при отправке этой формы.

вдохновение для этого исходит от Алло Пример Уценки, в частности редактор.js. Я использовал это в качестве основы для мой собственный скрипт вместе с Алло.js,разборки.js и to-markdown.js.

мой скрипт wysiwyg.js является производным редактор.js С Алло Пример Уценки. Некоторые моменты, чтобы отметить:

  • я использую это в приложении Rails (не то, что это имеет значение)
  • она работает ready а также на page:load, последний, потому что рельсы использует Turbolinks
  • она работает ajaxComplete потому что я использую Ajax для отчетов об ошибках формы
  • есть и другие зависимости: JQueryUI и Rangy (рельсы пользователи могут воспользоваться из драгоценных камней jQuery-ui-rails и rangy-rails).
  • и Шрифт Удивительным используется для значков панели инструментов. Версия hallo.js используемого демо устарел (он использует старую версию Шрифт Удивительным) - использовать Алло.js от GitHub вместо.

вам нужно только добавить CSS class='wysiwyg' любой <textarea> чтобы включить WYSIWYG на нем. Элемент <textarea> должен ли conain Markdown форматированный текст.

Я ожидал бы этого wysiwyg.js может быть легко адаптирована для использования другого редактора, Если вам не нравится Алло пока он работает на HTML в <div>. Есть довольно много, чтобы выбрать из, Но не все такие легкие, как Алло.

smilar кусок работы, который я нашел это markdown-html-form. Он использует то же самое разборки и to-markdown.

3