Question

有没有人成功过这个？

Answer 1

我通过用我自己的jquery.dialog方法替换Util.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);
}

如果你感兴趣的话，我写了一篇关于它的blog entry（带图片！），里面有一些示例代码以及我在实现这个时遇到的一些问题/解决方案。

Answer 2

以下黑客攻击需要使用jQuery，jQuery UI和Mike Alsup's 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()已被弃用。如果您使用的是更新版本的jQuery

，请切换到on()

在后端，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将此链接引起我的注意。我不得不咨询退回机器以恢复它。

Answer 3

在WMD的控制面板上添加一个按钮搜索以下字符串以查找添加按钮的位置： italicButton.XShift
在my version中，该函数位于类 SpritedButtonRow 中，并称为 build 。

忽略设置和 textOp 属性。 XShift是WMD附带的css sprite中按钮图像的位置，而不是那样，给按钮一个类，并在类中指定背景图像。然后只需在按钮上添加 onclick 事件即可这将做你需要做的事。
但是，我不认为上传按钮应该在文本编辑器中，没有意义。

如何将上传工具添加到wmd编辑器？

3 个答案: