Question

I am using the jQuery inline editing plugin Jeditable. Thankfully, Jeditable provides a plugin capability for extending the out of the box inline editing it provides.

I am hoping to not reinvent the wheel– as such does a PageDown plugin already exist for Jeditable? If one does my Google-fu is not turning up any results.

Answer 1

I never found a ready to go Jeditable PageDown plugin so I wrote my own. The below example is too specific to be used without modification, but should provide a decent enough outline for anyone endeavoring to accomplish a similar task.

Code to add a “markdown” input type to 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();
    }
});

The above code goes through a bunch of gyrations concerning the elements id, because in my case I can have several editors on a single page. See the PageDown documentation about Markdown.Editor for more details.

Once I’ve added the “markdown” input type to Jeditable it’s just a matter of utilizing it with this code:

$('.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
    }
});​

I want my users to see the markdown as HTML when they aren’t editing it so I have to make use of the callback and loadurl Jeditable parameters. The load url retrieves the text to edit in markdown format, while the callback converts the new text back to html.