HoBoFoTo

HoBoFoTo AMP

テキストモードにモーダルウィンドウを持つボタンを設置する

https://www.hobofoto.net/modal-window-in-text-mode/

　私は、このサイトを更新するときは、もっぱらテキストモードを使って更新しています。 　というのも、ビジュアルモードはどんな風に表示されるかがわかるので使い勝手はいいのですが、改行などの処理が思っているのと少し違った形で表...

モーダルウィンドウにテキストモードで選択している文字列を表示

　テキストモードで選択している文字列を取得するのは、とても簡単です。

canvas = document.getElementById(wpActiveEditor);
text = canvas.value;
startPos = canvas.selectionStart;
endPos = canvas.selectionEnd;
var result = text.substring( startPos, endPos);

1行目でテキストモードのカンバスを取得しています。
2行目でテキストモードに書いてあるすべての文字列を一旦取得し、
3，4行目で選択されているはじめの場所と終わりの場所を確認して、
5行目で選択文字列を切り取っています。

モーダルウィンドウにテキストモードで選択した文字列を表示する

　モーダルウィンドウに何か表示しようと思うと少しテクニックが必要です。でも慣れてしまえば、パターンが決まっているのでわかりやすいです。

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

　まずモーダルウィンドウに表示したい内容を<div id=”my-form”>と</div>の間に記入し$wpformに格納ます。そして最後の一行で一旦非表示で追加します。

　ここで前回のモーダルウィンドウを作成したときに残しておいたことが必要になってきます。

document.getElementById('Text').value=result;
tb_show('モーダルウィンドウ', '#TB_inline?width=400&height=500&inlineId=my-form', '');

　2行目にある、モーダルウィンドウを作成したときに使ったtb_showにあったinlineId=my-formです。これでIDが「my-form」と書いているブロックを表示させる事ができます。今回の場合は非表示にした部分ですね。
　1行目に前回にはなかったことがかいてあります。これは、IDがTextとなっている（今回はinputタグ）部分に「モーダルウィンドウにテキストモードで選択している文字列を表示」で取得した値を挿入しています。これで、モーダルウィンドウに選択した文字列を表示できます。

今回のコード

今回のコードの全容を載せておきます。

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

よかったらクリックしてください。