editor.md实现拖拽剪切复制粘贴上传图片,文件插件

editor.md作为一款Markdown编辑器,界面美观,功能强大

但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码。

uploadImg.js

  1. function initPasteDragImg(Editor){
  2. var doc = document.getElementById(Editor.id)
  3. doc.addEventListener('paste', function (event) {
  4. var items = (event.clipboardData || window.clipboardData).items;
  5. var file = null;
  6. if (items && items.length) {
  7. // 搜索剪切板items
  8. for (var i = 0; i < items.length; i++) {
  9. if (items[i].type.indexOf('image') !== -1) {
  10. file = items[i].getAsFile();
  11. break;
  12. }
  13. }
  14. } else {
  15. console.log("当前浏览器不支持");
  16. return;
  17. }
  18. if (!file) {
  19. console.log("粘贴内容非图片");
  20. return;
  21. }
  22. uploadImg(file,Editor);
  23. });
  24. var dashboard = document.getElementById(Editor.id)
  25. dashboard.addEventListener("dragover", function (e) {
  26. e.preventDefault()
  27. e.stopPropagation()
  28. })
  29. dashboard.addEventListener("dragenter", function (e) {
  30. e.preventDefault()
  31. e.stopPropagation()
  32. })
  33. dashboard.addEventListener("drop", function (e) {
  34. e.preventDefault()
  35. e.stopPropagation()
  36. var files = this.files || e.dataTransfer.files;
  37. uploadImg(files[0],Editor);
  38. })
  39. }
  40. function uploadImg(file,Editor){
  41. var formData = new FormData();
  42. var fileName=new Date().getTime()+"."+file.name.split(".").pop();
  43. formData.append('editormd-image-file', file, fileName);
  44. $.ajax({
  45. url: Editor.settings.imageUploadURL,
  46. type: 'post',
  47. data: formData,
  48. processData: false,
  49. contentType: false,
  50. dataType: 'json',
  51. success: function (msg) {
  52. var success=msg['success'];
  53. if(success==1){
  54. var url=msg["url"];
  55. if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
  56. Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");
  57. }else{
  58. Editor.insertValue("[下载附件]("+msg["url"]+")");
  59. }
  60. }else{
  61. console.log(msg);
  62. alert("上传失败");
  63. }
  64. }
  65. });
  66. }

使用方法

1.页面引入uploadImg.js

  1. <script src="uploadImg.js" type="text/javascript"></script>

2.editor.md配置开启图片上传功能,onload事件里面初始化插件

  1. var testEditor = editormd("test-editormd", {
  2. width: "90%",
  3. height: 740,
  4. path : '../lib/',
  5. theme : "dark",
  6. previewTheme : "dark",
  7. editorTheme : "pastel-on-dark",
  8. codeFold : true,
  9. saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
  10. searchReplace : true,
  11. imageUpload : true, //必须
  12. imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  13. imageUploadURL : "./php/upload.php", //必须
  14. onload : function() {
  15. initPasteDragImg(this); //必须
  16. }
  17. });

3.复制粘贴,拖拽文件也是可以的,上传服务添加支持的后缀就可以。

官方提供了php的上传代码./editor.md/blob/master/examples/php/upload.php

图片alt

这样就支持txt,pdf的拖拽,复制转帖上传功能了。

  1. GIthub : https://github.com/mifunc/editor.md.uploadImg 提供了php的demo,开箱即用

图片alt

返回笔记列表
入门小站