3

我正在使用 jQuery内联编辑插件 Jeditable。值得庆幸的是，Jeditable 提供了一个插件功能来扩展它提供的开箱即用的内联编辑。

我希望不要重新发明轮子——Jeditable 是否已经存在PageDown插件？如果有的话，我的 Google-fu 不会出现任何结果。

4

1 回答 1

5

我从来没有找到一个可以随时使用的 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 文档。

将“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 以 markdown 格式检索要编辑的文本，而回调将新文本转换回 html。

于 2012-03-13T22:19:24.317 回答