自己动手开发更好用的markdown编辑器-05(粘贴上传图片)

...
  //默认设置
  var defaultSystemData = {
    //最后一次打开的文件
    lastFile: null,
    //编辑器样式
    theme:‘ambiance‘,
    //预览窗口样式
    preViewTheme:‘github‘,
    //预览代码块样式
    preViewHighLightTheme:‘default‘,

    /*七牛空间设置*/
    accessKey:‘‘,
    secretKey:‘‘,
    //空间名称
    bucketName:‘test‘,
    //空间访问地址
    bucketHost:‘7xit3a.com1.z0.glb.clouddn.com‘,
    //过期时间,从设置之后多少小时过期.
    deadline:1000
  };

...
    <div class="form-group">
      <label>AccessKey</label>
      <input class="form-control" name="accessKey" ng-model="systemSetting.accessKey"/>
    </div>
    <div class="form-group">
      <label>SecretKey</label>
      <input class="form-control" name="secretKey" ng-model="systemSetting.secretKey"  type="text"/>
    </div>
    <div class="form-group">
      <label>空间名</label>
      <input class="form-control" name="bucketName" ng-model="systemSetting.bucketName" type="text"/>
    </div>
    <div class="form-group">
      <label>空间域名</label>
      <input class="form-control" name="bucketHost" ng-model="systemSetting.bucketHost" type="text"/>
    </div>
    <div class="form-group">
      <label>过期时间</label>
      <input name="deadline" class="form-control" ng-model="systemSetting.deadline" type="number"/>
    </div>
...

npm install qiniu --save

...
  //生成七牛存储空间token
  system.qiniuKeygen = function(systemSetting){
    var qiniu = require(‘../app/node_modules/qiniu‘);
    qiniu.conf.ACCESS_KEY = systemSetting.accessKey;
    qiniu.conf.SECRET_KEY = systemSetting.secretKey;
    var putPolicy = new qiniu.rs.PutPolicy(systemSetting.bucketName);
    putPolicy.expires = Math.round(new Date().getTime() / 1000) + systemSetting.deadline * 3600;
    systemSetting.qiniutoken = putPolicy.token();
    return systemSetting;
  };
...

...
studio.directive(‘hmdEditor‘, function () {
    return function ($scope, elem) {
      var systemData = hmd.system.get();
      hmd.editor.init({
        el:elem[0],
        theme:systemData.theme,
        //七牛云存储授权
        qiniuToken:hmd.system.qiniuKeygen(systemData).qiniutoken,
        //空间的域名
        bucketHost:systemData.bucketHost
      },systemData.lastFile);
      //保存最后一次打开的文件
      hmd.editor.on(‘setFiled‘,function(filepath){
        hmd.system.setLastFile(filepath);
      });
...

...
initQiniu:function(options){
  this.qiniuToken = options.qiniuToken;
  this.bucketHost = options.bucketHost;
  //监听粘贴事件
  $(‘.studio-wrap‘)[0].onpaste = this.uploadImage.bind(this);
},
uploadImage:function(ev){
  var clipboardData, items, item;
  if(!this.qiniuToken){
    this.fire(‘error‘,{msg:‘未设置七牛密钥,无法上传图片‘});
  }
  //如果粘贴的是图片
  else if (ev && (clipboardData = ev.clipboardData) && (items = clipboardData.items) &&
      (item = items[0]) && item.kind == ‘file‘ && item.type.match(/^image\//i)) {
    //取图片数据
    var blob = item.getAsFile();
    //生成随机的图片名
    var fileName = this.guid() + ‘.‘ +  blob.type.split(‘/‘)[1];
    //上传
    this._qiniuUpload(blob, this.qiniuToken, fileName, function (blkRet) {
      //生成markdown格式的图片地址
      var img = ‘![](http://‘+this.bucketHost+‘/‘ + blkRet.key + ‘)‘;
      //在光标处插入图片
      this.cm.doc.replaceSelection(img);
    }.bind(this));
    return false;
  }
},
//上传图片,参数为:图片2进制内容,七牛token,文件名,回调函数
_qiniuUpload:function (f, token, key,fn) {
  var xhr = new XMLHttpRequest();
  //创建表单
  xhr.open(‘POST‘, ‘http://up.qiniu.com‘, true);
  var formData, startDate;
  formData = new FormData();
  if (key !== null && key !== undefined) formData.append(‘key‘, key);
  formData.append(‘token‘, token);
  formData.append(‘file‘, f);
  var taking;

  xhr.onreadystatechange = function (response) {
    //上传成功则执行回调
    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText) {
      var blkRet = JSON.parse(xhr.responseText);
      fn(blkRet);
    } else if (xhr.status != 200 && xhr.responseText) {
      if(xhr.status == 631){
        hmd.editor.fire(‘error‘,{msg:‘七牛空间不存在.‘});
      }
      else{
        hmd.editor.fire(‘error‘,{msg:‘七牛设置错误.‘});
      }
    }
  };
  startDate = new Date().getTime();
  //提交数据
  xhr.send(formData);
}
...