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

фон

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

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

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

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

  • Live preview
  • несколько редакторов на одной странице (Я не знаю сколько в заранее, так как пользователь может динамически добавлять другое поле редактирования).
  • возможность расширения с помощью дополнительных кнопок (я хотел бы кнопку, чтобы загрузить изображение, а не просто добавить img URL).
  • возможность динамического отображения / скрытия окна редактирования (и только увидеть окно предварительного просмотра).
  • не абсолютная необходимость, но я бы предпочел придерживаться как можно ближе к внешнему виду Stack Overflow, так как это хорошо известно.
  • не знаю, если это имеет значение, но в основе написано на языке Джанго.

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

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

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

5 ответов:

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

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

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

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

отличия от версии переполнения стека

есть несколько отличия от редактора переполнения стека:

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

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

27

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

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

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

7

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

вы его используете что-то вроде этого (не нужно использовать 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.

5

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

онлайн демо доступно здесь:http://www.toptensoftware.com/markdowndeep/dingus

1

стандартный Общие Уценки включает в себя автономный файл 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);
0