クリップボードから画像を貼り付ける(Redmine View Customize Plugin)

ということで View customizeでやってみました。

設定内容

• Path pattern: .*
• Insertion position: Head of all pages

$(function() {

  $('form div.box').has('input:file.filedrop').on('paste', copyImageFromClipboard);

  function copyImageFromClipboard(e) {
    if (!$(e.target).hasClass('wiki-edit')) { return; }
    var clipboardData = e.clipboardData || e.originalEvent.clipboardData
    if (!clipboardData) { return; }
    var items = clipboardData.items
    for (var i = 0 ; i < items.length ; i++) {
      var item = items[i];
      if (item.type.indexOf("image") != -1) {
        var blob = item.getAsFile();
        var date = new Date();
        var filename = 'clipboard-'
          + date.getFullYear()
          + ('0'+(date.getMonth()+1)).slice(-2)
          + ('0'+date.getDate()).slice(-2)
          + ('0'+date.getHours()).slice(-2)
          + ('0'+date.getMinutes()).slice(-2)
          + '-' + randomKey(5).toLocaleLowerCase()
          + '.' + blob.name.split('.').pop();
        var file = new File([blob], filename, {type: blob.type});
        var inputEl = $('input:file.filedrop').first()
        handleFileDropEvent.target = e.target;
        addFile(inputEl, file, true);
      }
    }
  }
})

• https://github.com/onozaty/redmine-view-customize-scripts/blob/master/copy_image_from_clipboard.js

動作

ファイルアップロードができるようなテキストエリア(チケットの説明やWikiとか)でペーストすると画像のアップロード＋Wiki記法で画像表示が埋め込まれます。Redmine 4.0 で確認しています。