В каком редакторе javaScript javaScript должен использовать javaScript javaScript стиль (WMD)?

Question

Задний план

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

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

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

---

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

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

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

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

• То дербинс версия. Из того, что я могу сказать, это официальный переполнение стека. Похоже, это не поддерживает несколько редакторов на одной странице.
• jquery.markedit.markedit.. Отказ Выглядит очень хорошо, но довольно отличается от версии переполнения стека.
• Моумд. Отказ Похоже, победитель прямо сейчас, но я немного обеспокоен, поскольку он выглядит менее активным / взломанным, чем на вырвании.
• То WMD-NEW версия. Не уверен, выглядит как старая кодовая база без особых использований.
• То Социалсидная филиал. Отказ Похоже, это не для общественного пользования.

Answer 1

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

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

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

Для части просмотра Live Preview, Выставка Библиотека довольно проста в работе (а как указывает 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 использует объект преобразователя для чтения markdown в элементе #id_description и сбрасывает его в элемент предварительного просмотра #

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

Последнее бит просто регистрируется функция с событием keyup.

Answer 4

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

Онлайн демонстрация доступна здесь: http://www.toptensoftware.com/markdowndeep/ingingus.

Answer 5

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