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

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

62 голосов
/ 20 мая 2010

Фон

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

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

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

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

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

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

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

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

Ответы [ 5 ]

27 голосов
/ 29 мая 2010

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

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

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

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

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

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

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

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

7 голосов
/ 20 февраля 2014

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

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

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

5 голосов
/ 21 мая 2010

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

1 голос
/ 18 апреля 2014

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

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

0 голосов
/ 05 сентября 2014

Стандартный Обычная уценка включает в себя отдельный файл javascript для преобразования уценки в HTML.Его легко реализовать, как показано в официальной демоверсии или .

Примерно: 

<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);
...