markdowndeep圖片上傳

我與MarkDownDeep工作。它具有類似SO的類似「插入圖像」功能。markdowndeep圖片上傳

我想擴展此功能使用bootstrap modal，這將允許用戶上傳自己的圖像或至少得到一個typeahead工作，以便用戶可以選擇從另一個頁面上傳的東西。

我試圖在用一個回調函數下面的提示取代，但它不插入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; 
    };

你可以看到我的none-working fiddle

來源

2012-11-15 Eonasdan

這應該做的伎倆：

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

來源

2012-11-20 13:19:33

一個簡短的測試看起來像它的作品！今天早上我還有一些其他的東西，所以我需要一些時間來測試其餘部分。 – Eonasdan

也，你能解釋你做了什麼？ – Eonasdan

當命令函數返回「true」時，'InvokeCommand'函數執行一些額外的處理。你的原始函數返回'false'，因爲你正在等待用戶選擇一個文件。您需要在用戶選擇文件時複製額外的處理，或者再次調用「InvokeCommand」，以某種方式傳遞選定的文件。最簡單的選擇似乎是向編輯器添加一個臨時命令，調用它，然後刪除它。 –

我有這個代碼的一些問題，當我試圖插入第二個圖像到編輯器中，將插入的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搜索似乎到這裏來。

來源

2014-02-13 10:12:22

markdowndeep圖片上傳

回答

相關問題