6

有没有人成功做到这一点？

4

3 回答 3

3

我通过用我自己的 jquery.dialog 方法替换 Util.prompt 来实现这一点。prompt 函数将参数作为回调，从而可以轻松创建插入式替换。

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

以下 hack 需要使用jQuery、jQuery UI和Mike Alsup 的 jQuery Form Plugin来执行 AJAX 文件上传。该 hack 适用于链接版本（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>

我们实际上需要对wmd.js.
继续在那里搜索 (ctrl+f)var form = doc.createElement("form");
紧随这一行，为表单分配一个 id，dialogform将执行以下操作：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 sprite中的位置，取而代之的是给按钮一个类，在类中指定背景图片。然后只需向按钮添加一个onclick事件，该事件将执行您需要它执行的操作。
但是，我认为上传按钮不应该在文本编辑器中，没有意义。

于 2009-11-13T05:13:37.230 回答