Вопросы Теги

Какую Скидку с цены стиля переполнения стека (WMD) редактор JavaScript я должен использовать?

Фон

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

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

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

Требования для моего проекта

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

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

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

  • derobins версия. Из того, что я могу сказать, это - официальная версия Переполнения стека. Кажется, что это не поддерживает несколько редакторов на одной странице.
  • jQuery. MarkEdit. Выглядит очень хорошим, но довольно отличается от версии Переполнения стека.
  • MooWMD. Похож на победителя прямо сейчас, но я немного заинтересован, так как это смотрит меньше active/hackable, чем MarkEdit.
  • Новая для WMD версия. Не уверенный, похож на старую кодовую базу без большого использования.
  • Ответвление SocialSite. Кажется, что это не для общедоступного использования.
62
задан Peter Mortensen 16 May 2011 в 00:49
поделиться

2 ответа

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

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

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

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

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

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

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

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

27
ответ дан 24 November 2019 в 16:54
поделиться

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

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

Последний бит просто регистрирует функцию с событием нажатия клавиши.

5
ответ дан 24 November 2019 в 16:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: