Какой редактор JavaScript Markdown (WMD) в стиле Stack-Overflow мы должны использовать?

В конце концов, немного посмотрев вокруг в поисках готового редактора, я остановился на порте OpenLibrary WMD, расположенном по адресу http://github.com/openlibrary/wmd.

Причины, по которым я выбрал этого редактора

1. Отвечает большинству моих требований.
2. Похоже на редактор Stack Overflow. Есть несколько различий в поведении (см. Ниже).
3. Построен на основе jQuery (и не требует MooTools, что является преимуществом перед другими серьезный соперник, mooWMD).

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

Отличия от версии Stack Overflow

Есть несколько отличий от редактора Stack Overflow:

1. Одиночные вводы в конце строк вызывают <br/> вместо того, чтобы считаться одним абзацем. Я предпочитаю этот способ, поэтому меня устраивает это изменение.
2. Нумерованные списки нумеруются автоматически, как в Microsoft Word. То есть нажатие Enter после записи «1. первый элемент» автоматически приведет к появлению строки, начинающейся с «2». Это тоже изменение, которое мне очень нравится.

Что ж, надеюсь, это поможет любому, кто ищет похожий редактор. Если я закончу настройку редактора, я создам свою собственную ветку (она под лицензией MIT), но прямо сейчас я ухожу, не возясь с исходным кодом.

Что ж, этот вопрос (и решения) уже устарели, поэтому я подумал, может быть, я поставлю здесь что-нибудь обновленное. :)

Это начало 2014 года, и когда я столкнулся с той же проблемой, я в конце концов использовал PageDown-Bootstrap. Это редактор WMD на основе Twitter Bootstrap с полностью настраиваемой панелью стилей (панелью кнопок).

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

Что касается части предварительного просмотра в реальном времени, с библиотекой Showdown довольно легко работать (как и Эдан указывает, входит в кодовую базу)

Вы используете это примерно так (не нужно использовать jQuery, если вы не хотите)

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

Функция update_description_preview использует объект конвертера для чтения разметки в элементе #id_description и выгружает его в элемент # description-preview.

Здесь я вызываю функцию сразу после ее определения для инициализации окон предварительного просмотра (в редакторе был предварительно загружен некоторый текст)

Последний бит просто регистрирует функцию с событием keyup.

Не уверен, что он полностью соответствует старым требованиям, но еще одно решение, доступное в 2014 году, - это редактор Markdown с открытым исходным кодом с предварительным просмотром, лицензированный под Apache 2.0 и созданный программным обеспечением topten.

Онлайн-демонстрация доступна здесь: http://www.toptensoftware.com/markdowndeep/dingus

Standard Common Markdown включает автономный файл javascript для преобразования markdown в html. Его легко реализовать, как показано в официальной демонстрации или в этой plunker.

Примерно

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);