Markdown寫作兩大痛點
- 寫作過程中插入圖片無法自動上傳圖牀
- 寫作過程中使用語法時,輸入法中英文切換阻礙
本期我們解決第一個問題。如何在Markdown寫作過程,較爲流暢插入圖片,一直是一個令人頭疼的問題。
許多Markdown軟件自帶ctrl+v粘貼圖片功能,再不然右鍵或者按鈕都有快捷方式插入本地圖片的通道。但只能本地閱讀,倘若上傳微信公衆等其他平臺,本地圖片就會失效。
常規做法是,將本地圖片上傳圖牀,得到外鏈之後再插入文章中,利用Markdown Here進行渲染
只需要在你的編輯器裏面加上下面的代碼即可:
第一步:引入上傳圖片:
第二步:添加黏貼事件:
js代碼如下:
function initPasteDragImg(Editor){ var doc = document.getElementById(Editor.id) doc.addEventListener('paste', function (event) { var items = (event.clipboardData || window.clipboardData).items; var file = null; if (items && items.length) { // 搜索剪切板items for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { file = items[i].getAsFile(); break; } } } else { console.log("當前瀏覽器不支持"); return; } if (!file) { console.log("粘貼內容非圖片"); return; } uploadImg(file,Editor); }); var dashboard = document.getElementById(Editor.id) dashboard.addEventListener("dragover", function (e) { e.preventDefault() e.stopPropagation() }) dashboard.addEventListener("dragenter", function (e) { e.preventDefault() e.stopPropagation() }) dashboard.addEventListener("drop", function (e) { e.preventDefault() e.stopPropagation() var files = this.files || e.dataTransfer.files; uploadImg(files[0],Editor); }) } function uploadImg(file,Editor){ var formData = new FormData(); var fileName=new Date().getTime()+"."+file.name.split(".").pop(); formData.append('editormd-image-file', file, fileName); $.ajax({ url: Editor.settings.imageUploadURL, type: 'post', data: formData, processData: false, contentType: false, dataType: 'json', success: function (msg) { var success=msg['success']; if(success==1){ var url=msg["url"]; if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){ //Editor.insertValue("![圖片alt]("+msg["url"]+" ''圖片標題'')"); Editor.insertValue("![]("+msg["url"]+")"); }else{ Editor.insertValue("[下載附件]("+msg["url"]+")"); } }else{ console.log(msg); alert("上傳失敗"); } } }); }
上面操作之後即可以實現Markdown 截圖上傳了。