カテゴリー: WordPress

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

HoBoFoTo AMP
テキストモードにモーダルウィンドウを持つボタンを設置する
私は、このサイトを更新するときは、もっぱらテキストモードを使って更新しています。  というのも、ビジュアルモードはどんな風に表示されるかがわかるので使い勝手はいいのですが、改行などの処理が思っているのと少し違った形で表...
でモーダルウィンドウを表示するところまで、できました。今日はそのモーダルウィンドウにテキストモードで選択して文字列を表示するやり方を見ていきましょう。

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

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

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 >

まずモーダルウィンドウに表示したい内容を<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 >

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

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年 前