自作Markdownエディタでベッド機能を追加

markdownを使用すると、最も便利なのは、ベッド機能を利用して画像をクラウドに保存し、![]()構造に変換することです.画像がコンピュータのデバイスに存在することを心配しないでください.そうすれば、文章の内容をどこにでもコピーし、プラットフォームにシームレスに書き続けることができます.
今日は、自作markdownエディタで、ベッド機能を追加する方法について説明します.
私たちの主役は「PicGo」です.
PicGoのインストール

npm install picgo --save

PicGoの設定
picgoのデフォルトプロファイルは~/.picgo/config.jsonです.ここで~はユーザディレクトリである.システムによってユーザーディレクトリが異なります.
linuxとmacOSはいずれも~/.picgo/config.jsonである.
WindowsはC:Usersあなたのユーザー名.picgoconfig.jsonです
もちろん、自分のニーズに合わせて、プロファイルを異なるパスの下に置いて、主にpicgoの公式サイトの説明を参照して構成すればいいです.以下はupyunの構成内容です.

{
  "picBed": {
    "current": "upyun",
    "uploader": "upyun",
    "upyun": {
        "bucket": "coding", //      ，      
          "operator": "coding01", //    
          "password": "**********", //   
          "options": "", //              
          "path": "blog/", //        ，  img/
          "url": "http://***.****.com"
    }
  },
  "picgoPlugins": {}
}

構成されていない場合は、デフォルトのsm.msベッドを使用できます.
アップロードパターンのトリガー
書く過程で、アップロードをトリガーするのは簡単な方法で、2つの方法が便利だと思います.1つは直接画像をコピーして貼り付け、もう1つは画像をエディタにドラッグすることです.
今日は、アップロード画像を直接コピーして貼り付ける方法に重点を置きます.
せん断板
まず、electronのクリップボードを借りてコピーした画像情報を読み取る必要があります.clipboardはクリップボードを操作する機能も簡単で、コードを直接見ます.

const { clipboard } = require('electron')

//        ，type String (optional) - Can be selection or clipboard. selection is only available on Linux.
//    NativeImage-          。

clipboard.readImage([type])

詳細はelectron clipboardを参照https://electronjs.org/docs/api/clipboard
貼り付け
「Ctrl+Shift+V」の貼り付け操作だけで、クリップボードに画像がある場合はアップロード操作を実行するとエディタが判断します.
グローバルショートカット
まずelectronが提供する「グローバルショートカット」で効果を見てみましょう.

//      'CommandOrControl+X'       
  const ret = globalShortcut.register('CommandOrControl+v', () => {
    console.log('CommandOrControl+v is pressed')
    //             （         png）
    let callback = picgo.upload()
    console.log(callback)
  })

  if (!ret) {
    console.log('registration failed')
  }

  //            
  console.log(globalShortcut.isRegistered('CommandOrControl+v'))

印刷されたロゴを見ると、デフォルトのアップロードベッドがSM.MSであることもわかります.
「グローバル・ショートカット」のほか、「ローカル・ショートカット」も使用できます.
ローカルショートカットキー
「ローカルショートカット」を使用する前に、メニューとメニュー項目を作成し、メニュー項目で対応するショートカットキーをバインドする必要があります.

mainMenu(mainWindow);

//            
{
    label: '    ',
    accelerator: process.platform === 'darwin' ? 'Command+Shift+V' : 'Ctrl+Shift+V',
    click: () => { 
        mainWindow.webContents.send('uploadImage');
    }
},

mainWindow.webContents.sendショートカットキーアクションをipcRendererにプッシュし、rendererでリスニングイベントを作成できます.

ipcRenderer.on('uploadImage', (event) => {
  console.log('messageBus CommandOrControl+v is pressed')
  ipcRenderer.send('uploadImage');
})

クリップボードの画像を取得するにはipcMainに置くことをお勧めします.また、画像をアップロードするにも時間がかかります.そのため、ipcMainでuploadImageイベントを作成します.

ipcMain.on('uploadImage', function() {
  let img = clipboard.readImage()
  if (!img.isEmpty()) {
    let callback = picgo.upload()
    console.log(callback)
  }
})

では、ここまで、ショートカットキー「Command+Shift+V」で印刷ロゴを見てみましょう.
以上の2つの方法に加えて、aceエディタが持つCommand機能を利用する3つ目のショートカットキーの使用方法があります.
ace Command
EditorPageのeditorInit(editor)初期化メソッドにCommandを追加し、対応するショートカットキーをバインドします.

editor.commands.addCommand({
    name: '    ',
    bindKey: {win: 'Ctrl-Shift-M',  mac: 'Command-Shift-M'},
    exec: function(editor) {
        console.log('    ');
        messageBus.uploadImage();
    },
    readOnly: true // false if this command should not apply in readOnly mode
});

同様に、作成messageBus.uploadImage()

uploadImage() {
  console.log('messageBus ACE Command is pressed')
  ipcRenderer.send('uploadImage');
}

以上,個人的にace Commandメソッドを用い,画像をアップロードする機能をエディタの範疇に限定し,機能の使用にも合致する.
これで、デフォルトのsm.msに画像をアップロードするようになりました.次に表示される問題です.
ベッドをアップロードして表示
まずpicgoがアップロードに関連するいくつかのステータス関数を提供しているのを見てみましょう.

//       
picgo.on('uploadProgress', progress => {
  console.log('uploadProgress')
  console.log(progress)
})

picgo.on('beforeTransform', ctx => {
  console.log('beforeTransform')
  console.log(ctx.input) // ['/xxx/xxx.jpg']
})

picgo.on('beforeUpload', ctx => {
  console.log('beforeUpload')
  console.log(ctx.output) // [{ base64Image, fileName, width, height, extname }]
})

picgo.on('afterUpload', ctx => {
  console.log('afterUpload')
  console.log(ctx.output) // [{fileName, width, height, extname, imgUrl}]  {
  console.log('finished')
  console.log(ctx.output) // [{fileName, width, height, extname, imgUrl}]  {
  console.log('failed')
  console.log(error) //     
})

picgo.on('notification', notice => {
  console.log('notification')
  console.log(notice) // { title, body, text? }
})

その中で、私たちが必要とするのは、uploadProgress・afterUpload・failed・notificationです.
アップロードエラーであれば、多方面から判断できます:1.progress=-1を利用できます.2. error;3.notificationはエラーメッセージや内容も出力します.ここではnotificationを直接使用することをお勧めします.
まずafterUpload戻ってきたデータを見て、imgUrl内容をエディタに埋め込む必要があります.

picgo.on('afterUpload', ctx => {
  console.log('afterUpload')
  console.log(ctx.output.imgUrl) // [{fileName, width, height, extname, imgUrl}] 

受信側はイベントを直接受信し、emitはvueページに送信します.

// renderer/main.js
ipcRenderer.on('imgUrl', (event, imgUrl) => {
  messageBus.$emit('imgUrl', imgUrl);
})

// EditorPage.vue
messageBus.$on('imgUrl', (imgUrl) => {
    console.log(`imgUrl ${imgUrl}`);
    //      markdown   ，insert      
    this.editor.editor.insert(`![](${imgUrl})`);
});

結果を直視する
まとめ
次のようなものがあります.

各ベッド(七牛、又拍雲など)の配置設定を追加する.

アップロードベッドの機能をカプセル化する;

ドラッグ画像アップロードベッド機能を追加する;

アップロードの進捗や成否のヒントなどを増やす.

もちろん、私たちの目標は、自分の書く必要を満たすmarkdownエディタを書くと同時に、Electronフレームワークの使い方を学ぶことです.
覚えた

electronメニュー項目https://electronjs.org/docs/api/menu-item

electron「ローカルショートカット」と「グローバルショートカット」https://electronjs.org/docs/tutorial/keyboard-shortcuts

electronクリップボードhttps://electronjs.org/docs/api/clipboard

「Markdownエディタ」シリーズ

ElectronでMarkdownエディタを簡単に1つ作る(1)https://mp.weixin.qq.com/s/lXESP6Sa03ytCwppDwWkdg