markdowndeep image upload

Question

I'm working with MarkDownDeep. It has a similar "insert image" function like SO does.

I'd like to extend this function to use a bootstrap modal that would allow the user to upload their own images or at least get a typeahead working so that a user could pick something uploaded from another page.

I've tried to use a callback function in replace of the the prompt below but it doesn't insert str into the textbox like the original function.

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 is a holding variable because at the moment I'm using an iframe inside the modal so the user can upload, the iframe then sets parent.uploadImageUrl

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

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

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

Original

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

You can see my none-working fiddle

Answer 1

This should do the trick:

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

Answer 2

I had some issues with this code, in that when I tried to insert a second image into the editor it would insert the URL twice, and the third image three times and so on. It seemed to be running the imagePopup callback the same number of times as the number of images inserted. I resolved the issue with the following changes. Not perfect but it works:

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;

}

hope this helps someone else as pretty much every markdowndeep search seems to come here.