В поисках простого редактора WYSIWYG для кода Markdown я не нахожу пользовательского интерфейса, сопоставимого с интерфейсом CkEditor, TinyMCE и т. Д.
В частности, Markdown «WYSIWYG» редактора, которые часто рекомендуется (например, посты , как это ) не являются чисто WYSIWYG редакторов в том смысле , что пользователи либо еще пишут сырые Markdown ( MarkItUp ) или перейти к другой крайности иметь в линии редактирования без стандартные элементы управления ( Hallo ).
Мне нужно что-то среднее.
Я ищу редактор Markdown, который выглядит и работает как урезанное текстовое поле CkEditor, и который принимает и выводит Markdown. Должна быть панель инструментов с минимальным набором параметров форматирования (B, I, U, списки и т. Д.), А в области ввода текста должен отображаться преобразованный Markdown, а не исходный код. Должна быть кнопка Source, которая позволит пользователям редактировать необработанный Markdown, но даже это необязательно. Пример:
Я понимаю причину использования Markdown / wiki и т. Д. - безопасность, которую он предлагает. Я не против ввода необработанного кода, как здесь, в SE, но мои пользователи не вундеркинды и не находят это приятным. Они не хотят видеть * * * ___ и пробелы, смешанные с их текстом. Они используются для редактирования в стиле «Word» и наиболее продуктивны в этой среде.
Итак - есть ли действительно интегрированный редактор WYSIWYG для Markdown? Я пишу на PHP, поэтому то, что я могу вызвать с помощью класса, было бы идеально.
Обновление от 23 сентября 2015 г.
CKEditor теперь имеет Markdown аддон , который делает эту точную вещь. Проект аддона размещен на github .
Скриншоты:
Обновление от 13 апреля 2015 г.
Кто-то, претендующий на разработку CKEditor, говорит, что появление CommonMark меняет правила игры, и, возможно, мы увидим правильный интерфейс разметки для CKEditor (см. Комментарии к полной истории).
6 февраля 2015 г. Обновление
CKEditor теперь поставляется с плагином, который выводит (и принимает в качестве ввода) BBCode.
источник
divа панель инструментов - это еще однаdiv, это могут быть единственные элементы на странице. Решение Ahola отвечает вашим требованиям к «минимальному набору параметров форматирования (B, I, U, списки и т. Д.), А в области ввода текста должен отображаться преобразованный Markdown, а не исходный код». Не могли бы вы объяснить более четко, почему это решение не подходит для вас.Ответы:
На днях я исследовал эту тему и не нашел ни одного достойного редактора 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.
источник
SimpleMDE , новичок, может быть ответом. Вот уже месяц ищу что-то подобное. Я удивлен, что это не отображается выше в результатах поиска. Чтобы найти это, мне пришлось просмотреть заметку в lepture / editor .
источник
ИЗМЕНИТЬ 23 сентября 2015 г.
CKEditor теперь имеет Markdown аддон , который делает эту точную вещь. Проект аддона размещен на github .
Скриншоты:
Как было опубликовано в моем обновлении от 6 февраля 2015 года, CKEditor теперь включает плагины, которые позволяют ввод и вывод BBCode.
Демо-версия доступна здесь: http://ckeditor.com/demo#bbcode
РЕДАКТИРОВАТЬ 13 апреля 2015:
Кто-то, заявляющий о разработке CKEditor, говорит, что появление CommonMark меняет правила игры, и мы, возможно, сможем увидеть правильный интерфейс разметки для CKEditor (см. Комментарии к полной истории).
источник
Pen - это новый (активный с 2014 года) редактор WYSIWYG, который
выводит Markdown.Это не идеально - у меня были проблемы с вставкой туда HTML, но это работает.
источник
Я реализовал очень простой редактор, который позволяет
<textarea>редактировать содержимое файла, содержащего Markdown, в стиле WYSIWYG.Я использовал Hallo . Я не думаю, что на его веб-сайте очевидно, что он сам по себе не является редактором Markdown WYSIWYG, но демонстрация действительно подделывает путь к нему.
Hallo позволяет редактировать WYSIWYG HTML внутри файла
<div>. Я использовал javascript, чтобы скрыть любые<textarea>блоки с определеннымwysiwygклассом CSS, заменив его на a<div>и скопировав содержимое<textarea>в<div>. Копирование проходит через Showdown, который производит HTML из Markdown.Другая процедура Javascript реагирует каждый раз, когда
<div>содержимое изменяется. Он копирует содержимое обратно в (теперь скрытый)<textarea>. Контент проходит через markdown для преобразования из HTML в Markdown.Если
<textarea>это поле в<form>, то отредактированный Markdown будет отправлен на сервер при отправке этой формы.Источником вдохновения для этого послужил пример Hallo Markdown , а именно файл editor.js . Я использовал это в качестве основы для моего собственного сценария вместе с hallo.js , showdown.js и к markdown.js .
Мой сценарий wysiwyg.js является производным от editor.js из примера Hallo Markdown . Некоторые моменты, на которые следует обратить внимание:
readyи работаетpage:load, последний, потому что Rails использует TurbolinksajaxCompleteпотому что я использую Ajax для отчетов об ошибках формыhallo.jsиспользуемая в демонстрации , устарела (в ней используется старая версия Font Awesome ) - используйте вместо нее hallo.js из GitHub .Вам нужно только добавить CSS
class='wysiwyg'к любому,<textarea>чтобы включить на нем WYSIWYG. Он<textarea>должен содержать текст в формате Markdown.Я ожидал, что wysiwyg.js можно легко адаптировать для использования другого редактора, если вам не нравится Hallo, если он работает с HTML в файле
<div>. Есть довольно много вариантов на выбор, но не все такие легкие, как Hallo .Похожая работа, которую я нашел, - это markdown-html-form . Он использует те же методы Showdown и to-markdown .
источник
wysiwyg.js, но не добился больших успехов. Хотите знать, есть ли у вас сопутствующий HTML-код, спрятанный где-нибудь? Стабильный список версий, зависимостей и т. Д.? Спасибо!Я также ищу редактор разметки, описанный в верхней части этой ветки.
Вы видели "инструменты разметки": http://md-wysiwyg.sourceforge.net/
Демо: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/
Это кажется довольно близким к тому, что мы ищем, он выполняет разумную работу, беря ваш WYSIWYG-форматированный текст и выводя уценку. Однако это не удалось из-за исключения кодировки, когда я вставил некоторый форматированный текст из документа Google.
источник