markdowndeep 이미지 업로드

Question

나는 MarkDownDeep과 협력하고 있습니다. 그것은 같은 "삽입 이미지"기능을 가지고 있습니다.

bootstrap modal을 사용하여 사용자가 자신의 이미지를 업로드하거나 적어도 typeahead이 작동하도록하여이 기능을 확장하여 사용자가 다른 페이지에서 업로드 한 것을 선택할 수있게하고 싶습니다.

아래 프롬프트 대신 콜백 함수를 사용하려고했지만 원래 함수처럼 텍스트 상자에 str을 삽입하지 않았습니다. 사용자가 업로드 할 수 있도록 순간에 내가 모달 내부의 iframe을 사용하고 있기 때문에

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

을 설정

당신은 내 none-working fiddle

를 볼 수 있습니다이 트릭해야

Answer 1

:

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

나는 내가 두 번 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 검색이 여기에 온 것처럼 보입니다.