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

Ответ 1

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

Есть вероятность, что вы сможете создать 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.

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

РЕДАКТИРОВАТЬ 23 сентября 2015 г.

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

Скриншоты:

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

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

РЕДАКТИРОВАТЬ 13 апреля 2015 года:
Кто-то, кто занимается разработкой CKEditor, говорит, что внешний вид CommonMark - это смена игры, и мы могли бы увидеть правильный для CKEditor (читайте комментарии для полной истории).

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

Если <textarea> - это поле в <form > , тогда отредактированная Markdown будет отправлена ​​на сервер при отправке этой формы.

Вдохновение для этого происходит из примера Hallo Markdown, в частности editor.js. Я использовал это как основу для моего собственного script вместе с hallo.js, showdown.js и to-markdown.js.

My script, wysiwyg.js является производным от editor.js из Пример отметки Hallo Markdown. Некоторые замечания:

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

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

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

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

Ответ 7

Попробуйте ли вы это: http://mrcoles.com/demo/markdown-css/ Кажется лучшим в своем роде и работает 3 способа, т.е. HTML-Markdown-Preview

Есть еще одна вещь, отсутствующая, WYSIWYG.