plugins - 是否存在可用于Jeditable的PageDown插件？

我正在使用jQuery inline editing plugin Jeditable。值得庆幸的是，Jeditable provides a plugin capability扩展了它提供的开箱即用的内联编辑功能。

我希望不要重新发明轮子-像这样的Jeditable已有PageDown插件了吗？如果可以，我的Google-fu没有得到任何结果。

最佳答案

我从来没有找到一个随时可以使用的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();
    }
});

上面的代码经过了一系列关于元素id的旋转，因为在我的情况下，我可以在一个页面上有多个编辑器。有关更多信息，请参见关于Markdown.Editor的PageDown documentation。

将“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
    }
});​

我希望我的用户在不编辑Markdown时将其视为HTML，因此我必须使用callback和loadurl Jeditable parameters。加载网址以markdown格式检索要编辑的文本，而回调将新文本转换回html。