Существует ли плагин PageDown для Jeditable? - PullRequest
Новая
       40

Существует ли плагин PageDown для Jeditable?

3 голосов
/ 13 марта 2012

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

Я надеюсь не изобретать велосипед - как таковой плагин PageDown уже существует для Jeditable? Если один из моих Google-фу не показывает никаких результатов.

1 Ответ

5 голосов
/ 14 марта 2012

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

Код для добавления типа ввода «markdown» в Jeditable: 

var converter = Markdown.getSanitizingConverter();

$.editable.addInputType('markdown', {
    element: function(settings, original) {
        var editorId = original.id.substring(original.id.lastIndexOf("-"));
        var input = $('<textarea />');
        input.attr('id', 'wmd-input' + editorId);

        var panel = $('<div class="wmd-panel" />');
        panel.append('<div id="wmd-button-bar' + editorId + '" />');
        panel.append(input);
        panel.append('<div id="wmd-preview' + editorId + '" />');

        $(this).append(panel);
        return (input);
    },
    plugin: function(settings, original) {
        var editorId = original.id.substring(original.id.lastIndexOf("-"));
        var editor = new Markdown.Editor(converter, editorId);
        editor.run();
    }
});

Приведенный выше код проходит множество движений в отношении идентификатора элемента, потому что в моем случае у меня может быть несколько редакторов на одной странице.См. PageDown документацию о Markdown.Editor для более подробной информации.

После того, как я добавил тип ввода markdown в Jeditable, это просто вопрос использования его с этим кодом: 

$('.editable-element-area').editable('http://jsfiddle.net/echo/jsonp/', {
    onblur: 'submit',
    type: 'markdown',
    indicator: 'Saving...',
    loadurl: 'http://jsfiddle.net/echo/jsonp/', // retrieve existing markdown
    callback: function(value, settings) {
        $(this).html(converter.makeHtml(value)); // render updated markdown
    }
});​

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

...