JavaScript/pre2textarea のバックアップ(No.16)

TITLE:JavaScriptでpreタグで囲まれたソースコードをtextareaにコピーする

Posted by at 2012-07-25

JavaScriptでpreタグで囲まれたソースコードをtextareaにコピーする

概要

以下、preタグで囲まれたソースコードを簡単にコピーする方法をテスト

  • pre2textarea.user.js (Operaの場合、ユーザーJavaScriptフォルダにファイルをコピー)
  • pre要素をダブルクリックすると、内容がtextareaに変換される

ソースコード

Bookmarklet版

  • 名前
    • pre2textarea
  • アドレス(YUI Compressor で圧縮) 
    javascript:(function(){function d(g){var h=document.createElement("div");h.innerHTML=g.innerHTML.replace(/<br[ \/]*>/ig,"\n").replace(/<.*?>/mg,"");return h.childNodes[0].nodeValue.replace(/\xA0/g," ")}function c(g){g.parentNode.replaceChild(g.originalPre,g)}var e=function(j){var g=document.createElement("textarea"),h=this.getBoundingClientRect(),i=function(k){switch(k.type){case"keydown":if(k.keyCode=="27"){c(this)}break;case"dblclick":c(this)}};g.addEventListener("keydown",i,false);g.addEventListener("dblclick",i,false);g.style.width=h.width+"px";g.style.height=(h.height>240?240:h.height)+"px";g.originalPre=this;g.value=d(this);this.tx=g;this.parentNode.replaceChild(this.tx,this);this.tx.focus();this.tx.select()},f=document.getElementsByTagName("pre"),b=0,a=f.length;for(;b<a;b++){f[b].addEventListener("dblclick",e,false)}}());

メモ: ローカルにドロップして保存(ファイル名付き)

function makeDraggableDownloadLink(text, mimeType, fileName) {
  var blob = new Blob([text], {type: mimeType}),
         a = document.createElement('a');
  a.appendChild(document.createTextNode("download"));
  a.setAttribute('download', fileName);
  window.URL = window.URL || window.webkitURL;
  a.href = window.URL.createObjectURL(blob);
  a.addEventListener("dragstart", function(e) {
    e.dataTransfer.setData("DownloadURL", [mimeType,fileName,this.href].join(':'));
  }, false);
  return a;
}

メモ: 直接クリップボードにコピー

//ie, chrome-extension???
document.execCommand("copy");

メモ: Clipboard API

  • Clipboard API が使用できる ChromeやOpera 12.50 の場合、コピー、カットすると自動的に元のpreに戻すことが可能
var listener = function(e) {
  var tx = document.createElement("textarea"),
    rect = this.getBoundingClientRect(),
    name, ret,
  closeListener = function(e) {
    switch(e.type) {
    case 'copy':
    case 'cut':
      var dataTransfer = e.clipboardData;
      dataTransfer.items.add(this.innerText, 'text/plain');
      cleanup(this);
      e.preventDefault();
      break;
    case 'keydown':
      if(e.keyCode=="27") { // ESC
        cleanup(this);
      }
      break;
    case 'dblclick':
      cleanup(this);
    }
  };
  tx.addEventListener('copy',     closeListener, false);
  tx.addEventListener('cut',      closeListener, false);
  tx.addEventListener("keydown",  closeListener, false);
  tx.addEventListener("dblclick", closeListener, false);
//......

参考リンク

コメント