Вбудований текстовий редактор WySIWYG Markdown

Шукаючи прямого редактора WYSIWYG для коду Markdown, я не знаходжу порівнюваний інтерфейс користувача з CkEditor, TinyMCE, ect.

В Зокрема, Markdown «WYSIWYG» редактора, які часто рекомендується (наприклад, пости , як це ) не є чисто WYSIWYG редакторів в тому сенсі , що користувачі або ще пишуть сирі Markdown ( MarkItUp ) або перейти до іншої крайності мати в лінії редагування без стандартні елементи керування ( Hallo ).

Мені потрібно щось середнє.

Я шукаю редактор Markdown, який виглядає і функціонує як збитий текстове поле CkEditor, який приймає і видає Markdown. Повинна бути панель інструментів з мінімальним набором параметрів форматування (B, I, U, списки, ect), а область введення тексту повинна показувати перетворений відмітка, а не необроблений код. Повинна бути кнопка "Джерело", яка дозволить користувачам редагувати необмежену оцінку, але навіть це необов'язково. Наприклад:

Я отримую причину для Markdown / wiki, ect - безпеку, яку він пропонує. Я не проти вводити необроблений код, як тут, в SE, але мої користувачі не прислухаються і не вважають це приємним. Вони не хочуть бачити * * * ___ та пробіли, змішані з їх текстом. Вони використовуються для редагування стилів "Word" і є найбільш продуктивними в цьому середовищі.

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

23 вересня 2015 р. Оновлення

Тепер у CKEditor є додаток Markdown, який робить це точно. Проект аддона розміщується на github .

Скріншоти:

13 квітня 2015 р. Оновлення
Хтось, хто займається розробкою CKEditor, каже, що поява CommonMark - це зміна ігор, і ми, можливо, можемо побачити належний інтерфейс розмітки для CKEditor (читайте коментарі для повної історії).

6 лютого 2015 р. Оновлення

Тепер CKEditor оснащений плагіном, який видає (і приймає як вхід) BBCode.

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

Днями я займався цією темою, і не знайшов пристойного редактора 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 досить швидко.

SimpleMDE , новачок, може бути відповіддю. Я вже місяць шукаю щось подібне. Я здивований, що це не відображається вище в результатах пошуку. Щоб знайти це, мені довелося пройти повідомлення про лекцію / редактора .

EDIT 23 вересня 2015 року

Тепер у CKEditor є додаток Markdown, який робить це точно. Проект аддона розміщується на github .

Скріншоти:

Як було розміщено в моєму оновленні 6 лютого 2015 року, CKEditor тепер включає плагіни, які дозволяють вводити та виводити BBCode.

Демонстраційна версія доступна тут: http://ckeditor.com/demo#bbcode

EDIT 13 квітня 2015:
Хтось, хто займається розробкою CKEditor, каже, що поява CommonMark - це зміна ігор, і ми, можливо, зможемо побачити належний інтерфейс розмітки для CKEditor (читайте коментарі для повної історії).

Пен - це новий (активний з 2014 року) редактор WYSIWYG, який видає Markdown .
Це не ідеально - у мене виникли проблеми із вставкою HTML - але він працює.

Редагувати: Вибачте! Він не виводить Markdown. У коментарях Уелі Штрауч зазначив, що ознаки форматування Markdown, які я бачив, - це фактично правила псевдоелемента CSS:

Але я залишлю це як варіант, оскільки деякі люди підтримали цю відповідь, і це, можливо, комусь було корисно.

Я реалізував дуже простий редактор, який дозволяє редагувати вміст документа, <textarea>що містить Markdown, WYSIWYG.

Я використовував Hallo . Я не думаю, що його веб-сайт дає зрозуміти, що це не сам редактор Markdown WYSIWYG, але демонстрація прорисовує шлях до одного.

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

Інша програма Javascript реагує щоразу, коли <div>зміна вмісту змінюється. Він копіює вміст назад у (тепер прихований) <textarea>. Вміст запускається через розмітку для перетворення з HTML у Markdown.

Якщо поле <textarea>є в а<form >, відредагована Markdown буде відправлена ​​на сервер, коли ця форма буде подана.

Натхнення для цього надходить із прикладу Hallo Markdown , зокрема з файла editor.js . Я використовував це як основу для власного сценарію разом з hallo.js , showdown.js та to-markdown.js .

Мій сценарій, 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використовує демонстрація , застаріла (вона використовує стару версію Font Awesome ) - замість цього використовуйте hallo.js від GitHub .

Вам потрібно лише додати CSS class='wysiwyg'до будь-якого, <textarea>щоб увімкнути WYSIWYG. Текст у <textarea>форматі Markdown повинен містити текст.

Я би сподівався, що wysiwyg.js може бути легко адаптований до використання іншого редактора, якщо вам не подобається Hallo , якщо він працює на HTML в <div>. Можна вибрати декілька, але не всі такі легкі, як Hallo .

Усміхнена робота, яку я знайшов, - це markdown-html-форма . Він використовує те саме Showdown і to-markdown .

Я також шукаю редактор розмітки, який описаний у верхній частині цього потоку

Ви бачили "інструменти розмітки": http://md-wysiwyg.sourceforge.net/

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

Це здається досить близьким до того, що ми шукаємо, але це розумна робота - взяти ваш багатий текст WYSIWYG та вивести розмітку. Однак це не вдалося за винятком кодування, коли я вставив якийсь багатий текст від google doc.