質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

WordPressプラグインでボタンを押したときに入力したテキストをエディタ内に挿入したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 776

score 6

前提・実現したいこと

WordPressのビジュアルエディタで、「my-test」のアイコンを押すとモーダルウィンドウが表示されて、「挿入」ボタンを押すと入力した文字列をエディタ内に挿入するプラグインを作成したいです。

発生している問題・エラーメッセージ

エディタ部分が取得できない。文字の挿入が行えない。

該当のソースコード

my-test.php

<?php
/*
Plugin Name: my-test-plugin
Description: テスト
Version: 0.1
Author: poporon
Author URI: https://popozure.info
*/
class my_test {
    function __construct() {
        add_action('admin_print_scripts', array($this, 'admin_scripts') );
        add_filter('mce_buttons', array($this, 'add_mce_button') );
        add_filter('mce_external_plugins', array($this, 'add_mce_plugin') );
    }

    // 管理画面のスクリプト
    function admin_scripts() {
        wp_enqueue_style('my-test', plugin_dir_url (__FILE__).'my-test.css');
        echo '<div id="my-test-overlay">';
        echo '  <div id="my-test-modal">';
        echo '    <div id="my-test-close" onClick="document.getElementById(\'my-test-overlay\').style.display =\'none\';">×</div>';
        echo '    <div id="my-test-content">';
        echo '      <label>Text</label><input id="my-test-serif" type="text" size="30">';
        echo '      <input id="my-test-insert" type="button" value="挿入">';
        echo '    </div>';
        echo '  </div>';
        echo '</div>';
    }

    // 管理画面時のスタイルシート、スクリプト設定
    public function add_mce_button($buttons) {
        $buttons[] = 'my_test';
        return $buttons;
    }

    public function add_mce_plugin($plugins) {
        $plugins['my_test'] = plugin_dir_url (__FILE__).'my-test.js';
        return $plugins;
    }

}
$my_test = new my_test;


my-test.css

#my-test-overlay {
  z-index: 1001;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0,0,0,0.5);
}

#my-test-modal {
  width: 700px;
  margin: 10em auto;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #fff;
  z-index: 1002;
}

#my-test-close {
  position: relative;
  float: right;
  margin: -10px;
  cursor: pointer;
}

#my-test-content {
  text-align: center;
  padding: 10px;
}

#my-test-code {
    display: none;
}

#my-test-icon {
    display: none;
}


my-test.js

(function() {
    tinymce.create('tinymce.plugins.mytest', {
        init: function(ed, url){
            ed.addButton('my_test',{
                title: 'my-test',
                cmd: 'insert_my_test'
            });
            ed.addCommand('insert_my_test', function() {
                document.getElementById("my-test-overlay").style.display = 'block';
            });
        },
        createControl: function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('my_test',tinymce.plugins.mytest);
})();

試したこと

挿入ボタンでgetElementalByIdでtinymce部分を取得しようとしましたが上手くいきませんでした。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

JavaScriptに以下の記述をしたところ、期待通りの動作をしました。ありがとうございました。

    $("#my-test-insert").unbind().click(function(){
        tinymce.activeEditor.selection.setContent(document.getElementById("my-test-serif").value);
    });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

https://www.naenote.net/entry/paste-raw-html

こちらのプラグインが参考になるかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/05 13:31

    情報ありがとうございます。分析してみます。

    キャンセル

  • 2019/08/05 13:40

    分析しました。文字列の入力だけの場合だとこの方法が使えるのですが、実際にはプルダウンなど、複数項目を追加したいのでこのプラグインと同じ方法だと難しそうです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • WordPressプラグインでボタンを押したときに入力したテキストをエディタ内に挿入したい