“大规模杀伤性武器”网络 Markdown 和如何实现图像上传功能

Question

我正在开发一个使用 MarkDown 和 WMD javascript 工具的网站，该工具目前可以满足已经托管的图像的需求，但我希望能够根据 Stack Overflow 在 WMD 中提供图像上传工具，但我不知道怎么办呢？

有谁知道如何实施？我的网站正在使用 ASP.NET MVC 进行开发，我对上传图像等的服务器端很满意，但如何将其挂接到 javascript WMD 编辑器（以及可能的 AJAX 元素）中是我需要考虑的问题。我被困住了。

Answer 1

我们最近发布了 WMD 的重构版本；您可以在 http://code.google.com/p/pagedown/ 找到它。

Stack Overflow 使用的所有非标准内容现在都通过插件挂钩进行，其中包括我们的文件上传器。所以你可以使用相同的钩子来实现这一点。查看文档； “连接”部分归结为：

editor.hooks.set("insertImageDialog", function (callback) {
    var dia = createMyDialog();
    dia.find(".ok-button").click(function () {
        var url = getChosenImageUrl();
        removeMyDialog();
        callback(url);
    });
    dia.find(".cancel-button").click(function () {
        removeMyDialog();
        callback(null);
    });
    return true; // tell the editor not to show the standard dialog
});

至于实际的上传，我们目前使用一个非常丑陋的解决方案，其工作原理如下：

• 实际的文件上传表单将其 target 属性设置为隐藏的 iframe ，因此提交表单不会将您带到不同的页面。
• 在全局对象上定义了一个函数，用于删除对话框并调用回调。这是丑陋的部分；这种方法一点也不干净，但效果很好。
• 上传控制器操作返回一个最小的 HTML 文档，其中包含一段调用此函数的 JavaScript 代码（通过 window.parent，因为我们必须突破 iframe - 请注意，这需要上传 URL与页面具有相同的起源！）以及新创建图像的地址。

如果您打算以类似的方式实现这一点，请查看 Meta Stack Overflow 上的这篇文章，涉及可能出现的令人讨厌的 Chrome 错误及其解决方法。