6

誰かがこれを行うことに成功しましたか？

4

3 に答える 3

3

Util.prompt を独自の jquery.dialog メソッドに置き換えることでこれを実現しました。プロンプト関数はパラメーターをコールバックとして受け取るため、ドロップイン置換を簡単に作成できます。

if (isImage) {
    // OLD: util.prompt(imageDialogText, imageDefaultText, makeLinkMarkdown);
    // WMD_IMAGE_GALLERY_URL loaded from a global settings elsewhere
    util.imageGallery(WMD_IMAGE_GALLERY_URL, makeLinkMarkdown);
}
else {
    util.prompt(linkDialogText, linkDefaultText, makeLinkMarkdown);
}

興味があれば、ブログ エントリ(写真付き!) を書きました。これには、いくつかのサンプル コードと、これを実装する際に遭遇した問題/解決策が含まれています。

于 2009-11-18T22:08:53.077 に答える
1

次のハックでは、 AJAX ファイルのアップロードを実行するためにjQuery、jQuery UI、およびMike Alsup の jQuery Form Pluginを使用する必要があります。ハックは、リンクされたバージョン (jQ 1.7.2 および jQUI 1.8.20) で動作します。他のバージョンとの互換性は保証できません。

<head>に、依存関係を含める必要があります。

<script type='text/javascript' src='jquery.min.js'></script>
<link href='theme/jquery-ui.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='jquery-ui.js'></script>
<script type='text/javascript' src='wmd/showdown.js'></script>
<script type='text/javascript' src='wmd/wmd.js'></script>
<link type='text/css' rel='stylesheet' href='wmd/wmd.css'/>
<script type='text/javascript' src='jquery.form.js'></script>

実際には、 に 1 つの変更を加える必要がありwmd.jsます。
そこに移動し、(ctrl+f) でvar form = doc.createElement("form");
[この行のすぐ後に、フォームに ID を割り当てます]を検索します。form.id = "dialogform";

フロントエンドで、次を実行します。

$(document).ready(function(){
    $("#wmd-image-button").live("click",function(){
        setTimeout(function(){
            $(".wmd-prompt-dialog").css({"opacity": "0", display: "none"});
        }, 100);
        var $div = $("<div>");
        var $form = $("<form>").attr({action: "submit_image.php", method: "post"})
        var $file = $("<input/>").attr({type: "file", name: "image"});
        var $name = $("<input/>").attr({type: "text", name: "name", placeholder: "Name"});
        var $submit = $("<input/>").attr("type", "submit");
        $form.append($name, $file, $submit).ajaxForm(function(r) {
            r = $.parseJSON(r);
            if(r.success){
                $("#dialogform input[type='text']").val(r.filename);
                $("#dialogform input[value='OK']").trigger("click");
                $div.dialog("close");
            }
        });
        $div.append($form).dialog({title: "Upload Image"});
    });
    $("#wmd-link-button").live("click", function(){
        setTimeout(function(){
            $(".wmd-prompt-dialog").css("opacity", "1");
        }, 100);
    });
});

この投稿は jQuery 1.7.2 向けに書かれたものであり、live()それ以来廃止されていることを思い出してください。on()より新しいバージョンの jQuery を使用している場合は、に切り替えてください

バックエンドでは、次のようになりsubmit_image.phpます。

    $f = $_FILES['image'];
    $p = $_POST;
    $allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
    $detectedType = exif_imagetype($f['tmp_name']);
    if(in_array($detectedType, $allowedTypes)){
        $pi = pathinfo($f['name']);
        $ext = $pi['extension'];
        $target = "img/" . strtolower(str_replace(" ", "-", $p['name'])) . "." . $ext;
        if(move_uploaded_file($f['tmp_name'], $target)){
            $returnArr = array(
                "success" => true,
                "filename" => site_url($target)
            );
            echo json_encode($returnArr);
        }
        else echo json_encode(array("success" => false));
    }
    else echo json_encode(array("success" => false, "msg" => "Invalid File Type."));

うまくいけば、それがあなたを始めさせるでしょう。これは、私の JavaScript のスキルが標準以下だった数年前に書かれたものです。ハハ。私は以前、これをブログ (現在は死んでいます) で、段階的な手順と説明とともに持っていました。不要な毛羽立ち。このリンクを私の注意に向けてくれた@Kamiccoloに感謝します。それを復活させるために、ウェイバックマシンに相談しなければなりませんでした。

于 2012-09-18T07:00:55.157 に答える
0

WMDのコントロールパネルにボタンを追加。
次の文字列を検索して、ボタンが追加されている場所を見つけます。 italicButton.XShift
私のバージョンでは、関数はSpritedButtonRowクラスにあり、 buildと呼ばれます。

setupおよびtextOp属性を無視します。XShift は、WMD に付属する css スプライト内のボタン イメージの位置です。その代わりに、ボタンにクラスを指定し、そのクラスで背景イメージを指定します。次に、必要なことを実行するonclickイベントをボタンに追加するだけです。
しかし、アップロード ボタンをテキスト エディター内に配置する必要はないと思います。意味がありません。

于 2009-11-13T05:13:37.230 に答える