関連する記事 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )SyntaxHighlighter でソースコードをクリップボードへコピーしていたのは、元々は Flash でした。現在はHTML のボタンに差し替えていますが、昔は object 要素が埋め込まれていました。なので、差し替え方法としては object のあった場所に button を作成する事になります。 元々、innerHTML の中に文字列をセットしていただけなので、特別な問題無く差し替える事ができています。問題は、クリップボードの処理をどのように実装するかというところが重要ですが、これは clipboard.js というライブラリを使用する事によって、IE11 という面倒なブラウザの対応も容易になっています。 以下のサンプルでは、innerHTML 以外の方法として、jQuery と document.write による実装を行っています。パターンが4つあるのは、JavaScript 内で日本語記述をしないようにコード化を行っています。HTMLエンティティのほうは、ブラウザに表示される時に日本語表現となります。unicode 文字列は、JavaScript が文字列として読み込んだ瞬間に日本語表現になります。 ( ※ SyntaxHighlighter 内の既存ソース内へ追加する為、日本語を使用しないようにしています。 ) この場合どちらも結果は同じですが、JavaScript では 後者が重要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.js"></script>
<script>
$(function () {
// jQuery でボタン作成
$(html1).appendTo(document.body);
$(html2).appendTo(document.body);
// クリップボード用のトリガーとなる要素が持つクラスを決定する
// ( ボタンにこのクラスをセットしておく )
var clipboard = new Clipboard('.my_clipboard');
// ボタンのイベントで、クリップボード転送用のエリアへデータを送る
// ( ボタンに data-clipboard-target で、エリアの id をセットしておく )
$(".my_clipboard").on("click", function(){
var time = (new Date()).getTime();
console.log(time);
$("#target_clipboard").text(time);
});
// それに対するクリップボードへコピー後の処理( 無くてもいい )
clipboard.on('success', function(e) {
e.clearSelection();
alert("クリップボードにコピーしました");
});
});
var html1 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"クリップボードへコピーします\">copy1</button>"
var html2 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u30b3\u30d4\u30fc\u3057\u307e\u3059\">copy2</button>"
var html3 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"クリップボードへコピーします\">copy3</button>"
var html4 = "<button style='vertical-align:top;border-radius:4px;height:16px;line-height:8px;' class=\"my_clipboard\" data-clipboard-target=\"#target_clipboard\" title=\"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u30b3\u30d4\u30fc\u3057\u307e\u3059\">copy4</button>"
// ボタンを文字列として出力して作成
document.write(html3);
document.write(html4);
</script>
<div id="target_clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
※ ボタンは、copy3 copy4 copy1 copy2 という順序で作成されます。
jQuery の $(function(){}) は、ページがロードされた後に実行されるので、まず copy3 と copy4 が作成されます。その後、$(function(){}) の最初にある記述で、copy1 と copy2 が作成されます。そして、それぞれに対してクリップボードのオブジェクトと、クリックイベントを関係付けています。
|
|
【JavaScript ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
