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

Ответ 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);