AddQuickTag は、とても便利なプラグインです。
自分で設定したタグがボタン一つでエディタに入力できるプラグインです。
ところが、値を必要とするタグは、ダメ。

例えば、Aタグなら href の値を入れられない。
タグを挿入してから投稿エリアでURLを入力しないといけない。

そこで、AddQuickTagのボタンでウィンドウでを開き値を入力させてからタグを挿入する機能を付けたい。

AddQuckTag のカスタマイズでやるのは荷が重い

値（パラメータ）を入力するウィンドウを表示させてそのウィンドウの値を取り出してタグを生成してそのタグを挿入。
というのは、AddQuickTagのカスタマイズで実現するのはかなり骨が折れる。
そこで、ボタンを追加して、JavaScriptを動かす方法を考えた。

Addbuttonのポイント

• ボタンの追加
• ボタン押下でウィンドウを開く
• ウィンドウで入力された値（パラメータ）を取り出してタグを作る
• 作ったタグを編集エリアへ挿入する

ボタンの追加の仕方

編集領域の上にボタンを追加するには、QTags.addButtonを使います。
QTags.addButtonは、以下のような書式です。

QTags.addButton(‘ID’, ‘LABEL’, callbackfunc);

ID：他とぶつからない任意のID
LABEL：表示するボタンのラベル
callbackfunc：コールバック関数名

AddQuickTagのようにボタンを追加する

これは、以下のようなJavaScriptのコマンドがあります。

QTags.addButton(‘ID’, ‘LABEL’, コールバック関数名);

単純に 入力する値が１つで AddQuickTagのようにタグを挿入するならば、
QTags.addButton('ID', 'LABEL', callbackfunc);<br />function callbackfunc(f, g, fd){<br />　// パラメータの入力<br />　scnt = window.prompt("値を入力してください", "");<br />　// タグの作成<br />　line = ";<br />　　：<br />　//タグの挿入<br />　this.tagStart = line;<br />　QTags.TagButton.prototype.callback.call(this, f, g, fd);<br />}<br />

値を prompt を使って入力させれば、その場でタグを作ることができます。

値が複数になる場合は、きちんと formタグ を使って form を表示させないといけません。

ボタン押下でウィンドウを開く

javascript の場合 モーダルウィンドウで form を作成させます。 呼出し 　QTags.addButton('rnk', 'Ranking', rankingfunction);<br />　function rankingfunction(f, g, fd){<br />　　//キーボード操作などにより、オーバーレイが多重起動するのを防止する<br />　　$(this).blur() ; //ボタンからフォーカスを外す<br />　　if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;<br />　　　//オーバーレイ用のHTMLコードを、[body]内の最後に生成する<br />　　　$("body").append('<div id="modal-overlay"></div>');<br />　　　//[$modal-overlay]をフェードインさせる<br />　　　$("#modal-overlay").fadeIn("slow");<br />　　　//[$modal-content]をフェードインさせる<br />　　　$("#modal-content").fadeIn("slow");<br />　　　centeringModalSyncer();<br />}<br />

モーダルウィンドウの設定
<!-- ここからモーダルウィンドウ --><br /><div id="modal-content"><br />　<!-- モーダルウィンドウのコンテンツ開始 --><br />　<p><a id="modal-close" class="button-link">閉じる</a></p><br />　<form name="formS"><br />　　<input type="text" name="title1" id="title1"><br />　　<textarea name="biko" id="biko" cols="80" rows="5"></textarea><br />　</form><br />　<!-- モーダルウィンドウのコンテンツ終了 --><br />　</div><br />　<!-- ここまでモーダルウィンドウ --><br /><br /><script><br />//ウィンドウで入力された値（パラメータ）を取り出してタグを作る<br />//閉じるをクリックされた時の処理<br />$( "#modal-overlay,#modal-close" ).unbind().click( function(){<br />　//挿入テキスト(値取り出し)<br />　line1 = $('#title1').val();<br />　line2 = $('#biko').val();<br /> <br />　//挿入テキスト(作成)<br />　line = '';<br />　　：<br />　//作ったタグを編集エリアへ挿入する<br />　//作成したテキストを挿入<br />　var textarea = document.getElementById("content");<br />　var sentence = textarea.value;<br />　var len = sentence.length;<br />　var pos = textarea.selectionStart;<br />　var before = sentence.substr(0, pos);<br />　var word = line;<br />　var after = sentence.substr(pos, len);<br />　sentence = before + word + after;<br />　textarea.value = sentence;<br />　//モーダルウィンドウを閉じる<br />　$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){<br />　　//[#modal-overlay]を削除する<br />　　$('#modal-overlay').remove() ;<br />　　} ) ;<br />　} ) ;<br /><br />　$( window ).resize( centeringModalSyncer ) ;<br />　　//センタリングを実行する関数<br />　　function centeringModalSyncer() {<br />　　　//画面(ウィンドウ)の幅、高さを取得<br />　　　var w = $( window ).width() ;<br />　　　var h = $( window ).height() ;<br />　　　// コンテンツ(#modal-content)の幅、高さを取得<br />　　　// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。<br />　　　var cw = $( "#modal-content" ).outerWidth();<br />　　　var ch = $( "#modal-content" ).outerHeight();<br />　　　//センタリングを実行する<br />　　　$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;<br />　}<br /></script><br /><style><br />#modal-content {<br />　width: 50% ;<br />　margin: 0 ;<br />　padding: 10px 20px ;<br />　border: 2px solid #aaa ;<br />　background: #fff ;<br />　position: fixed ;<br />　display: none ;<br />　z-index: 1002 ;<br />}<br /><br />#modal-overlay {<br />　z-index: 1001 ;<br />　display: none ;<br />　position: fixed ;<br />　top: 0 ;<br />　left: 0 ;<br />　width: 100% ;<br />　height: 120% ;<br />　background-color: rgba( 0,0,0, 0.75 ) ;<br />}<br /><br />.button-link {<br />　color: #00f ;<br />　text-decoration: underline ;<br />}<br /> <br />.button-link:hover {<br />　cursor: pointer ;<br />　color: #f00 ;<br />}<br /></style><br />

プラグイン化する

function.php に書き込んでもいいですし、プラグインにしても使えます。
// テキストエディタにクイックタグボタンを追加<br />function add_my_quicktag() {?><br /><script type="text/javascript"><br /> QTags.addButton('ID', 'LABEL', callbackfunc);<br /> function callbackfunc(f, g, fd){<br /> $(this).blur() ; //ボタンからフォーカスを外す<br /> if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;<br /><br /> $("body").append('<div id="modal-overlay"></div>');<br /> <br /> $("#modal-overlay").fadeIn("slow");<br /><br /> $("#modal-content").fadeIn("slow");<br /><br /> centeringModalSyncer(); <br /> }<br /></script><br /><?php<br />}<br />add_action('admin_print_footer_scripts', 'add_my_quicktag');<br />

/********************************************************/<br />// 設定<br />/********************************************************/<br />add_action( 'admin_menu' , 'bootstrap_box'); // 投稿画面追加<br />/********************************************************/<br />function bootstrap_box()<br />/********************************************************/<br />{<br /> add_meta_box(<br /> 'bootstrap_append1', <br /> 'パラメータタグ', <br /> 'bootstrap_append', 'post', 'normal', 'high' ); // —-(1)<br /><br /> add_meta_box(<br /> 'bootstrap_append2', <br /> 'パラメータタグ', <br /> 'bootstrap_append', 'page', 'normal', 'high' ); // —-(1)<br />}<br />/********************************************************/<br />function bootstrap_append()<br />/********************************************************/<br />{<br />?><br /><!-- ここからモーダルウィンドウ --><br /><div id="modal-content"><br /> <!-- モーダルウィンドウのコンテンツ開始 --><br /> <p><a id="modal-close" class="button-link">閉じる</a></p><br /> <form name="formS"><br /> <input type="text" name="title1" id="title1"><br /> <textarea name="biko" id="biko" cols="80" rows="5"></textarea><br /> </form><br /> <!-- モーダルウィンドウのコンテンツ終了 --><br /></div><br /><!-- ここまでモーダルウィンドウ --><br /><br /><script><br /> //[#modal-overlay]、または[#modal-close]をクリックしたら…<br /> $( "#modal-overlay,#modal-close" ).unbind().click( function(){<br /> //挿入テキスト(値取り出し)<br /> line1 = $('#title1').val();<br /> line2 = $('#biko').val();<br /> <br /> //挿入テキスト(作成)<br /> line = '';<br /> line += '<div>'+line1+'</div>';<br /> line += '<div style="background-color:#ffc;">'+line2+'</div>';<br /><br /> //作成したテキストを挿入<br /> var textarea = document.getElementById("content");<br /> var sentence = textarea.value;<br /> var len = sentence.length;<br /> var pos = textarea.selectionStart;<br /> var before = sentence.substr(0, pos);<br /> var word = line;<br /> var after = sentence.substr(pos, len);<br /> sentence = before + word + after;<br /> textarea.value = sentence;<br /><br /> //[#modal-content]と[#modal-overlay]をフェードアウトした後に…<br /> $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){<br /> //[#modal-overlay]を削除する<br /> $('#modal-overlay').remove() ;<br /><br /> } ) ;<br /><br /> } ) ;<br /><br /> //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する<br /> $( window ).resize( centeringModalSyncer ) ;<br /><br /> //センタリングを実行する関数<br /> function centeringModalSyncer() {<br /><br /> //画面(ウィンドウ)の幅、高さを取得<br /> var w = $( window ).width() ;<br /> var h = $( window ).height() ;<br /><br /> // コンテンツ(#modal-content)の幅、高さを取得<br /> // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。<br />// var cw = $( "#modal-content" ).outerWidth( {margin:true} );<br />// var ch = $( "#modal-content" ).outerHeight( {margin:true} );<br /> var cw = $( "#modal-content" ).outerWidth();<br /> var ch = $( "#modal-content" ).outerHeight();<br /><br /> //センタリングを実行する<br /> $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;<br /><br /> }<br /></script><br /><style><br />#modal-content {<br /> width: 50% ;<br /> margin: 0 ;<br /> padding: 10px 20px ;<br /> border: 2px solid #aaa ;<br /> background: #fff ;<br /> position: fixed ;<br /> display: none ;<br /> z-index: 1002 ;<br />}<br /> <br />#modal-overlay {<br /> z-index: 1001 ;<br /> display: none ;<br /> position: fixed ;<br /> top: 0 ;<br /> left: 0 ;<br /> width: 100% ;<br /> height: 120% ;<br /> background-color: rgba( 0,0,0, 0.75 ) ;<br />}<br /><br />.button-link {<br /> color: #00f ;<br /> text-decoration: underline ;<br />}<br /> <br />.button-link:hover {<br /> cursor: pointer ;<br /> color: #f00 ;<br />}<br /></style><br /><?php<br />}<br />/********************************************************/<br />

AddQuickTag に値（パラメータ）入力して、作ったタグを挿入する まとめ

AddQuickTag をカスタマイズするのは骨が折れます。
そこで、 JavaScript のモーダルウィンドウを使用して値（パラメータ）を入力させます。
入力した値（パラメータ）は、モーダルウィンドウで入力されているため 閉じる 等のアクションで取り出すことができます。
タグの挿入は、テキストエリアのカーソルポイントを利用して挿入します。

AddQuckTagの原理がわかってしまうと様々なタグを入れたくなります。
値（パラメータ）入力型のタグ挿入もその一つです。

QTags.addButton の使い方がわかってしまうと、AddQuckTagを自作したくなりますよね？