如何将上传实用程序添加到wmd编辑器？

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);
}

如果您有兴趣，我写了一篇 博客有关它的条目（带图片！），其中有更多示例代码以及我在实现此过程中遇到的一些问题/解决方案。

Answer 2

以下黑客需要使用 jQuery, jQuery UI 和 Mike Alsup 的 jQuery 表单插件，用于执行 AJAX 文件上传。该黑客适用于链接版本（jQ 1.7.2 和 jQUI 1.8.20）。我不能保证与其他版本的兼容性。

---

在您的 中，您需要包含依赖项：

<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
在我的版本中，该函数位于类SpritedButtonRow中，称为build 。

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