Javascript markdowndeep图像上传

我和你一起工作。它具有类似的“插入图像”功能

我想扩展这个功能，使用一个可以让用户上传他们自己的图片或者至少得到一个工作，这样用户就可以从另一个页面选择上传的内容

我尝试使用回调函数替换下面的提示，但它并没有像原始函数那个样将

str

插入文本框

pub.cmd_img = function (ctx) {
    ctx.TrimSelection();
    if (!ctx.CheckSimpleSelection())
        return false;

    imagePopUp(function(results) {

        $("#" + ctx.m_textarea.id).focus();

        var url = results;

        if (url === null)
            return false;

        var alttext = ctx.getSelectedText();
        if (alttext.length == 0) {
            alttext = "Image Text";
        }

        var str = "![" + alttext + "](" + url + ")";

        ctx.ReplaceSelection(str);
        ctx.m_selectionStart += 2;
        ctx.m_selectionEnd = ctx.m_selectionStart + alttext.length;
        return true;
    });
    return false;

uploadImageUrl

是一个保持变量，因为此时我正在模态中使用iframe，以便用户可以上载，iframe然后设置

parent.uploadImageUrl

uploadImageUrl = "baz"; 
function imagePopUp(callback) {
    $('#imageUpload').modal('show');

    $('#confirmTrue').click(function () {
        $('#imageUpload').modal('hide');

        if (callback) callback(uploadImageUrl);
    });
}

原创

 pub.cmd_img = function (ctx) {
        ctx.TrimSelection();
        if (!ctx.CheckSimpleSelection())
            return false;

        var url = prompt("Enter the image URL"); //need to change what this does

        if (url === null)
            return false;

        var alttext = ctx.getSelectedText();
        if (alttext.length == 0) {
            alttext = "Image Text";
        }

        var str = "![" + alttext + "](" + url + ")";

        ctx.ReplaceSelection(str);
        ctx.m_selectionStart += 2;
        ctx.m_selectionEnd = ctx.m_selectionStart + alttext.length;
        return true;
    };

---

您可以看到我的

这应该可以做到：

pub.cmd_img = function(ctx){

   ctx.TrimSelection();
   if (!ctx.CheckSimpleSelection())
      return false;

   //call popup
   imagePopUp(function(results){

      $("#" + ctx.m_textarea.id).focus();

      var url = results;
      if (url === null)
         return false;

      var alttext = ctx.getSelectedText();
      if (alttext.length == 0){
         alttext = "Image Text";
      }

      var str = "![" + alttext + "](" + url + ")";
      var editor = $(ctx.m_textarea).data("mdd");

      editor.cmd_img_core = function(state){
         state.ReplaceSelection(str);
         state.m_selectionStart += 2;
         state.m_selectionEnd = state.m_selectionStart + alttext.length;
         return true;
      };

      editor.InvokeCommand("img_core");
      delete editor.cmd_img_core;
   });             
   return false;
};

---

我对这段代码有一些问题，当我试图在编辑器中插入第二个图像时，它会插入URL两次，第三个图像插入三次，以此类推。它运行imagePopup回调的次数似乎与插入图像的次数相同。我通过以下更改解决了该问题。虽然不完美，但它很有效：

var isImageInserted = false; 
pub.cmd_img = function (ctx) {
    ctx.TrimSelection();
    if (!ctx.CheckSimpleSelection())
        return false;

    isImageInserted = false;
    //call popup
    imagePopUp(function (results) {

        $("#" + ctx.m_textarea.id).focus();

        var url = results;
        if (url === null)
            return false;

        var alttext = ctx.getSelectedText();
        if (alttext.length == 0) {
            alttext = "Image Text";
        }
        var str = "";
        if (!alttext.indexOf(url) > -1) {
            str = "![" + alttext + "](" + url + ")";
        } else {
            str = alttext;
        }

        var editor = $(ctx.m_textarea).data("mdd");
        if (!isImageInserted) {
            editor.cmd_img_core = function (state) {
                state.ReplaceSelection(str);
                state.m_selectionStart += 2;
                state.m_selectionEnd = state.m_selectionStart + alttext.length;
                isImageInserted = true;
                return true;
            };

            editor.InvokeCommand("img_core");
            delete editor.cmd_img_core;
        }

    });
    return false;

}

---

希望这对其他人有所帮助，因为几乎每个markdowndeep搜索都会出现在这里

一个简短的测试看起来很有效！今天早上我还有一些事情要做，所以我需要一些时间来测试剩下的部分。另外，你能解释一下你做了什么吗？

InvokeCommand

函数在命令函数返回

true

时执行一些额外的处理。原始函数返回的是

false

，因为您正在等待用户选择文件。当用户选择文件时，您需要复制额外的处理，或者再次调用

InvokeCommand

，以某种方式传递所选文件。最简单的选择似乎是向编辑器添加一个临时命令，调用它，然后删除它！它就像我希望的那样工作！我会立即给你们赏金，因为在10小时内[恩……给予或接受：）]这帮了我很多忙，谢谢你们。但是，我发现如果我尝试添加第二个映像，InvokeCommand会运行两次，留下一个像这样的标签：！]（）如果我尝试添加第三个图像，它会运行3次，再次插入Url。需要研究一下替换选择的逻辑。