原Editor.md在线Markdown编辑器图片上传实战（二）

目录

1. editormd 同域图片上传

1.1. 前端js配置

var editor = editormd("markeditor", { 
    path   : "/static/lib/editormd/lib/", //editormd路径
    imageName:"picture",  //上传图片名称
    imageUpload    : true,  //开启图片上传
    imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL : '图片上传地址',
});

注意：imageName字段在Editor.md源码中是不可以配置的，默认值是：editormd-image-file

通过修改源码来支持editor.md自定义配置上传图片字段。

editormd目录/plugins/image-dailog/image-dailog.js

在第30行后添加代码：

var imgName = settings.imageName || classPrefix + "image-file";

替换第54行代码为：

 "<input type=\"file\" name=\"" + imgName + "\" accept=\"image/*\" />" +

替换134行代码为：

var fileInput  = dialog.find("[name=\"" + classPrefix + "image-file\"]");

成功解决动态配置editor.md上传图片的字段名称

1.2. 服务端处理图片上传

Thinkphp5 版图片上传处理

public function upload(){
    // 获取表单上传文件,我们在前端设置的字段名为： picture ,如果没有配置字段则这里为：editormd-image-file
    $file = request()->file('picture'); 
    if(empty($file)){
      $data = [
         "success"=>0,
         "message"=>"请选择上传的文件"
      ]; 
      exit(json_encode($data)); 
   }
   $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
   if($info){
       $data = [
           "success"=>1,
           "message"=>"success",
           "url"=>"/public/uploads/".$info->getSaveName()
       ]; 
   }else{
       //上传失败获取错误信息 
       $data = [
           "success"=>0,
           "message"=>$file->getError() 
       ];  
   }
   exit(json_encode($data));  
}

2. editormd 跨域图片上传

2.1 跨域上传原理

利用 iframe 来实现，A 站 POST 到 B 站，B 站处理上传后再跳转回到 A 站的 callback 页面，callback 页面此时在 iframe 内（即同域下），再通过 window.parent 就可以操作父页面的任意元素了。

2.2 前端html配置

<form method="post" target="upload-iframe" enctype="multipart/form-data" action="ttp://b.lakeui.com/uploader.php?callback=http://a.lakeui.com/callback.html">
    <input type="file" name="picture" accept="image/*" />
    <input type="submit" id="submit" value="开始上传" />
</form>
<iframe name="upload-iframe" style="display:none;" frameborder="0"></iframe>

2.3 前端js配置

<script type="text/javascript"> 
var editor = editormd("markeditor", { 
    path   : "/static/lib/editormd/lib/", //editormd路径
    imageName:"picture",  //上传图片名称
    imageUpload    : true,  //开启图片上传
    imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL : '图片上传地址', 
    crossDomainUpload : true,   //开启跨越上传
    uploadCallbackURL : "http://xxxxxx/upload_callback.html?test=dfdf"    //上传成功callback地址
});
var query = {};
var urlParams = window.location.search.split('?')[1];
urlParams = urlParams.split("&");
for (var i = 0; i< urlParams.length; i++) {
   var param = urlParams[i].split("="); 
   query[param[0]] = param[1]; 
} 
var imageDialog = window.parent.document.getElementById(query['dialog_id']);
</script>

2.4 跨域上传服务器处理

public function upload(){
    header("Access-Control-Allow-Origin: *"); //允许跨域
    //上传代码参考上面...
    $callback = $_GET['callback'];
    $code = 1; //上传成功 1 失败 0
    $msg = 'success';  //提示消息
    $url = '图片地址';
    $location =  "{$callback}?success={$code}&message={$msg}&url={$url}"; 
    header('location:' . $location);
    exit;
}

结束语

其实这些官方demo里面都有提供，感兴趣自己也可以深入研究！接下来我会整理一些常见的问题出一篇文章