本身動手開發更好用的markdown編輯器-05(粘貼上傳圖片)

這裏文章都是從我的的github博客直接複製過來的,排版可能有點亂. 原始地址 http://benq.im/2015/04/28/hexomd-05/

文章目錄

上一篇咱們實現了實時預覽功能.html

今天這篇要利用免費的七牛雲存儲服務來實現粘貼自動上傳圖片的功能.
不想看過程的朋友能夠直接下載打包好的程序使用,使用以前記得配置七牛賬號.node

文章的內容包含如下三點:git

七牛雲存儲.
clipboard-apis
ajax文件上傳

七牛雲存儲

系統設置

首先在系統設置裏增長七牛空間設置部分,這裏就簡單的貼上代碼,由於系統設置模塊以前幾篇了都講過了.github

system/model.jsajax

...
  //默認設置
  var defaultSystemData = {
    //最後一次打開的文件
    lastFile: null,
    //編輯器樣式
    theme:'ambiance',
    //預覽窗口樣式
    preViewTheme:'github',
    //預覽代碼塊樣式
    preViewHighLightTheme:'default',

    /*七牛空間設置*/
    accessKey:'',
    secretKey:'',
    //空間名稱
    bucketName:'test',
    //空間訪問地址
    bucketHost:'7xit3a.com1.z0.glb.clouddn.com',
    //過時時間,從設置以後多少小時過時.
    deadline:1000
  };

system.htmlnpm

...
    <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>
...

增長了accesskey,secretkey,空間名,過時時間四個用於上傳圖片的字段. 其中accesskey, secretkey用於驗證權限,空間名用於指定上傳圖片的存儲空間,過時時間指定受權的過時時間. 這四個字段共同組成上傳受權的Token,生成的方法以下:api

安裝七牛nodejs版sdk七牛雲存儲

1	npm install qiniu --save

system/model.jsmarkdown

...
  //生成七牛存儲空間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;
  };
...

配置七牛賬號

首先得註冊一個七牛賬號.hexo

進入後臺,新建一個空間,我這裏取的空間名爲blog,用於我博客的圖片存儲.

選擇新建的空間,點擊空間設置>域名設置,查看自動分配的域名

回到後臺首頁,點擊帳號設置,能夠查看accessKey(AK)和SecretKey(SK)

在剛作好的後臺裏配置好這幾個字段

我把我空間的密鑰遮住了,你們請填上本身的空間密鑰

圖片上傳

圖片的存儲空間準備好了,如今來實現上傳的功能.

初始化editor的時候傳入七牛的token
studio/directive.js

...
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);
      });
...

studio/editor裏實現圖片上傳功能

...
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);
}
...

至此這個功能就完成了,隨便截張圖而後在編輯器裏粘貼,編輯器就會自動生成圖片引用地址:

這個功能較爲簡單,所以今天篇幅較小.

總結

粘貼上傳圖片的功能讓我不用頻繁的停下來上傳圖片,能夠大大的提升用markdown寫文章的效率.
目前功能還較爲簡單,不能指定圖片名,不能分目錄,你們能夠根據本身的需求修改代碼,完善功能.

接下來的計劃:

自動更新.
雲同步.
插件機制
表情插件.

附件

本篇程序打包,七牛雲存儲未設置好,請自行根據教程設置.
項目地址