モーダルウィンドウ からテキストモードに文字列を挿入する
モーダルウィンドウ編の最終です。今回は前回
HoBoFoTo AMP
モーダルウィンドウ にテキストモードで選択した文字列を表示する
でモーダルウィンドウを表示するところまで、できました。今日はそのモーダルウィンドウにテキストモードで選択して文字列を表示するやり方を見ていきましょう。
前回の最後のコードを見てみましょう。
function add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
var wpform = jQuery('\
<div id="my-form">\
<p class="description">文字表示</p>\
<table class="form-table">\
<tr>\
<td><label for="Text">テキスト</label></td>\
<td>\
<input id="Text" name="Text" type="text" value="" class="" />\
</td>\
</tr>\
</table>\
<input class="button button-primary" name="Insert" title="Insert" value="挿入" type="button" onClick="my_input(this)">\
</div>');
wpform.appendTo('body').hide();
function my_callback() {
canvas = document.getElementById(wpActiveEditor);
text = canvas.value;
startPos = canvas.selectionStart;
endPos = canvas.selectionEnd;
var result = text.substring( startPos, endPos);
document.getElementById('Text').value=result;
tb_show('モーダルウィンドウ', '#TB_inline?width=400&height=500&inlineId=my-form', '');
}
QTags.addButton( 'Wp_my_callback','my_callback', my_callback );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );
16行目で onClick=”my_input(this)を指定しています。これで、送信ボタンをクリックするときの処理を実行することができます。その処理は
function my_input(){
var text = document.getElementById(text').value;
if(text== ""){
exit;
}
var win = window.dialogArguments || opener || parent || top;
win.send_to_editor( text );
}
です。ここでは、2行目でIDにtextが設定されているテキストボックスの値を取得しています。
そして、値が空でなければ、6~7行目でテキストモードに文字列を挿入しています。
こうすることで、文字列を挿入することができました。
最後に今回のコードの全容です。
function add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
function my_input(){
var text = document.getElementById(text').value;
if(text== ""){
exit;
}
var win = window.dialogArguments || opener || parent || top;
win.send_to_editor( text );
}
var wpform = jQuery('\
<div id="my-form">\
<p class="description">文字表示</p>\
<table class="form-table">\
<tr>\
<td><label for="Text">テキスト</label></td>\
<td>\
<input id="Text" name="Text" type="text" value="" class="" />\
</td>\
</tr>\
</table>\
<input class="button button-primary" name="Insert" title="Insert" value="挿入" type="button" onClick="my_input(this)">\
</div>');
wpform.appendTo('body').hide();
function my_callback() {
canvas = document.getElementById(wpActiveEditor);
text = canvas.value;
startPos = canvas.selectionStart;
endPos = canvas.selectionEnd;
var result = text.substring( startPos, endPos);
document.getElementById('Text').value=result;
tb_show('モーダルウィンドウ', '#TB_inline?width=400&height=500&inlineId=my-form', '');
}
QTags.addButton( 'Wp_my_callback','my_callback', my_callback );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );