カテゴリー: WordPress

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

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

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 >

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 >

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

Share
Writer:
Dr?Thomas

Recent Posts

  • python

Qiitaに投稿

最近pythonにはまりだした。 (さら…

2週間 前
  • Ubuntu

USB3.0でUEFI起動する外付けUSBメモリUbuntu19.04を作る

最近は UEFI で起動するパソコンがほ…

3か月 前
  • その他

Last Quest新章追加

新しい章「2 Ryki's determ…

3か月 前
  • WordPress

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

でモーダルウィンドウを表示するところまで…

1年 前
  • WordPress

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

私は、このサイトを更新するときは、もっ…

1年 前