HoBoFoTo

Hobo everyday foto.

日本語 English

モーダルウィンドウ からテキストモードに文字列を挿入する

モーダルウィンドウ編の最終です。今回は前回

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' );

 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

共有:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です