是否存在Jeditable的PageDown插件？

Question

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

我希望不要重新发明轮子 - 就像Jeditable 已经存在PageDown插件一样？如果我的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的回转,因为在我的情况下,我可以在一个页面上有几个编辑器.有关更多详细信息,请参阅有关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.