[最新]editor.md怎么实现黏贴上传图片功能?从内存中复制图片并上传结合tp6

发布时间:2020-01-07 13:38:20作者:柯曾栎热度: 172 ℃
``` 2:实例化editor ``` var testEditor; $(function() { testEditor = editormd("test-editormd", { width : "100%", height:'600px', //autoHeight : true, path : "/static/index/editormd/lib/", imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "{:url('upload/mdeditor')}", htmlDecode : "style,script,iframe", tex : true, emoji : true, taskList : true, flowChart : true, sequenceDiagram : true, onload : function() { // alert("onload"); // this.setMarkdown("### onloaded"); // console.log("onload =>", this, this.id, this.settings); //编辑器 拖拽上传 var codeEditor = $(".CodeMirror")[0]; codeEditor.ondragenter = function(e) { e.preventDefault(); e.stopPropagation(); console.log("dragenter"); return false; }; codeEditor.ondragover = function(e) { e.preventDefault(); e.stopPropagation(); console.log("dragover"); return false; }; codeEditor.ondrop = function(e) { e.preventDefault(); e.stopPropagation(); console.log("drop"); var files = e.dataTransfer.files // 这里获取到用户拖放的文件 console.log('333333333333333333333333'); console.log(files); // 其中 ajaxUpload是Ajax上传文件的函数 // uploadUrl是后端提供的上传地址, uploadCallback是上传后的回调函数,用于生成代码片段并插入编辑器 ajaxUpload('{:url(\'upload/mdeditor\')}', files, uploadCallback); return false; }; } }); $("#append-btn").click(function(){ $.get("/static/index/editormd/test.md", function(md){ testEditor.appendMarkdown(md); }); }); }); ``` 3:js监听黏贴上传 ``` /** * 粘贴上传图片 */ $("#test-editormd").on('paste', function (ev) { var data = ev.clipboardData; var items = (event.clipboardData || event.originalEvent.clipboardData).items; for (var index in items) { var item = items[index]; if (item.kind === 'file') { var blob = item.getAsFile(); var reader = new FileReader(); reader.onload = function (event) { var base64 = event.target.result; //ajax上传图片 $.post("{:url('upload/paste_up')}",{base:base64}, function (ret) { layer.msg(ret.msg); if (ret.code == 1) { //新一行的图片显示 //editor.insertValue("\n![" + ret.data.title + "](" + ret.data.path + ")"); uploadCallback(ret); } }); }; // data url! var url = reader.readAsDataURL(blob); } } }); ``` 4:上传后图片显示处理 ``` function uploadCallback(data) { var url = data.url; // 依据后端返回的数据格式而定 var link = url; if (!url) return false; var alt = ""; var cm = testEditor; // myEditormd是用editormd函数创建的编辑器对象,这里假设myEditor是全局变量 var cursor = cm.getCursor(); // 获取光标位置 if (url.endsWith(".mp4")) { // 如果是是视频 var videoHtml = ''; videoHtml = "\n" + videoHtml + "\n"; // videoHtml是生成的HTML视频代码片段 cm.replaceSelection(videoHtml); // 插入到编辑器中 cm.setCursor(cursor.line, cursor.ch + 2); return; } // 以下是对图片上传结果的处理,引用原image-upload插件的代码 var altAttr = (alt !== "") ? " \"" + alt + "\"" : ""; if (link === "" || link === "http://") { cm.replaceSelection("![" + alt + "](" + url + altAttr + ")"); } else { cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")"); } if (alt === "") { cm.setCursor(cursor.line, cursor.ch + 2); } } ``` 5:付 拖拽图片上传代码 >具体触发拖拽上传方法在步骤1中的codeEditor.ondrop = function(e) 中实现触发 ``` //ajax 上传文件 function ajaxUpload(uploadUrl, files, callback) { console.log("my ajax upload begin"); console.log(files[0]); var formData = new FormData(); formData.append('file', files[0]); // 可以添加其他需要传给后端的参数 $.ajax({ url: uploadUrl, type: 'POST', data: formData, cache: false, contentType: false, //不可缺 processData: false, //不可缺 dataType: 'json', success: function(data) { console.log("result:", data); callback(data); }, complete: function(data) { } }); return false; } ``` 6:后台图片处理代码 ``` //editor md黏贴上传 从内存中黏贴 public function paste_up() { $base64 = input('base'); $base64 = str_replace("data:image/png;base64,","",$base64); $base64 = str_replace("data:image/jpg;base64,","",$base64); $base64 = str_replace("data:image/gif;base64,","",$base64); $base64 = str_replace("data:image/jpeg;base64,","",$base64); $file = base64_decode($base64); $date = date("Ymd"); $path = "./public/uploads/".$date."/"; $filename = $path.uniqid().".png"; if(!is_dir($path)){ mkdir($path,0755); } $img = file_put_contents($filename,$file); $savename = Request::domain()."/".$filename; $savename = str_replace("./","",$savename); $arr = [ // success : 0 | 1, // 0 表示上传失败,1 表示上传成功 // message : "提示的信息,上传成功或上传失败及错误信息等。", // url : "图片地址" // 上传成功时才返回 'code'=>1, 'msg'=>"成功", 'url'=>$savename ]; return json($arr); } ```

米醋儿 micuer.com