Какой редактор JavaScript для разметки (WMD) следует использовать?

Фон

Я работаю над приложением, которое требует содержимого, введенного пользователем, и я решил использовать редактор Markdown в стиле. После изучения этой темы в течение последних нескольких дней, я понимаю, что есть многочисленные вилки базового редактора WMD, некоторые из которых имеют несколько базовых улучшений, а некоторые с серьезными отличиями от.

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

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

Требования к моему проекту

Предварительный просмотр в прямом эфире
Несколько редакторов на одной странице (я не знаю, сколько заранее, так как пользователь может динамически добавлять другое окно редактирования).
Возможность расширения с помощью дополнительных кнопок (я бы хотел, чтобы кнопка загружала изображение, а не просто добавляла URL img).
Возможность динамически показывать/скрывать окно редактирования (и видеть только окно предварительного просмотра).
Не абсолютная необходимость, но я бы предпочел придерживаться взгляда и ощущения Stack Overflow, так как он хорошо известен.
Не знаю, имеет ли это значение, но бэкенд написан в Django.

Редакторы Я просмотрел

Вот несколько оснований кода, на которые я смотрел, с мыслями. Очевидно, я мог бы пропустить еще одно решение.

derobins. Из того, что я могу сказать, это официальная версия. Похоже, что он не поддерживает несколько редакторов на одной странице.
jQuery.MarkEdit. Выглядит очень хорошо, но довольно отличается от версии.
MooWMD. Похоже, победитель прямо сейчас, но я немного обеспокоен тем, что он выглядит менее активным/взломанным, чем MarkEdit.
wmd-new. Не уверен, выглядит как старая база кода без особого использования.
Филиал SocialSite. Похоже, что это не для общественного пользования.

Ответ 1

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

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

Отвечает большинству моих требований.
Выглядит как редактор. Существует несколько различий в поведении (см. Ниже).
Создается поверх jQuery (и не требует MooTools, что является плюсом для другого серьезного соперника, mooWMD).

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

Для части предварительного просмотра в реальном времени библиотека 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.

Ответ 4

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

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

Ответ 5

~~Стандартная~~ Обычная Markdown включает автономный файл javascript для преобразования метокда в 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);