plugins - Jeditable 是否存在 PageDown 插件？

Question

我正在使用 jQuery inline editing plugin Jeditable .谢天谢地，Jeditable provides a plugin capability用于扩展它提供的开箱即用的内联编辑。

我希望不要重新发明轮子——PageDown 也是如此Jeditable 的插件已经存在？如果有人这样做，我的 Google-fu 不会显示任何结果。

Answer 1

我从来没有找到一个现成的 Jeditable PageDown 插件，所以我自己写了一个。下面的示例过于具体，无法在不修改的情况下使用，但应该为任何努力完成类似任务的人提供足够体面的概述。

向 Jeditable 添加“markdown”输入类型的代码:

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 的旋转，因为在我的例子中，我可以在一个页面上有多个编辑器。查看PageDown documentation关于 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
    }
});​

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