3

jQueryインライン編集プラグイン Jeditableを使用しています。ありがたいことに、Jeditable は、すぐに使用できるインライン編集を拡張するためのプラグイン機能を提供します。

私は車輪を再発明しないことを望んでいます.Jeditable用のPageDownプラグインはすでに存在しますか？私のGoogle-fuが結果を出していない場合。

4

1 に答える 1

5

すぐに使える Jeditable PageDown プラグインが見つからなかったので、自分で作成しました。以下の例は、変更せずに使用するには具体的すぎますが、同様のタスクを達成しようとする人にとっては適切な概要を提供するはずです。

「マークダウン」入力タイプを 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 ドキュメントを参照してください。

「マークダウン」入力タイプを 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 として表示するようにしたいので、 callback および loadurl Jeditable パラメータを使用する必要があります。ロード URL は編集するテキストをマークダウン形式で取得し、コールバックは新しいテキストを html に変換します。

于 2012-03-13T22:19:24.317 に答える