前提・実現したいこと
WordPressのビジュアルエディタで、「my-test」のアイコンを押すとモーダルウィンドウが表示されて、「挿入」ボタンを押すと入力した文字列をエディタ内に挿入するプラグインを作成したいです。
発生している問題・エラーメッセージ
エディタ部分が取得できない。文字の挿入が行えない。
該当のソースコード
my-test.php
php
1<?php 2/* 3Plugin Name: my-test-plugin 4Description: テスト 5Version: 0.1 6Author: poporon 7Author URI: https://popozure.info 8*/ 9class my_test { 10 function __construct() { 11 add_action('admin_print_scripts', array($this, 'admin_scripts') ); 12 add_filter('mce_buttons', array($this, 'add_mce_button') ); 13 add_filter('mce_external_plugins', array($this, 'add_mce_plugin') ); 14 } 15 16 // 管理画面のスクリプト 17 function admin_scripts() { 18 wp_enqueue_style('my-test', plugin_dir_url (__FILE__).'my-test.css'); 19 echo '<div id="my-test-overlay">'; 20 echo ' <div id="my-test-modal">'; 21 echo ' <div id="my-test-close" onClick="document.getElementById(\'my-test-overlay\').style.display =\'none\';">×</div>'; 22 echo ' <div id="my-test-content">'; 23 echo ' <label>Text</label><input id="my-test-serif" type="text" size="30">'; 24 echo ' <input id="my-test-insert" type="button" value="挿入">'; 25 echo ' </div>'; 26 echo ' </div>'; 27 echo '</div>'; 28 } 29 30 // 管理画面時のスタイルシート、スクリプト設定 31 public function add_mce_button($buttons) { 32 $buttons[] = 'my_test'; 33 return $buttons; 34 } 35 36 public function add_mce_plugin($plugins) { 37 $plugins['my_test'] = plugin_dir_url (__FILE__).'my-test.js'; 38 return $plugins; 39 } 40 41} 42$my_test = new my_test;
my-test.css
css
1#my-test-overlay { 2 z-index: 1001; 3 display: none; 4 position: fixed; 5 top: 0; 6 left: 0; 7 width: 100%; 8 height: 120%; 9 background-color: rgba(0,0,0,0.5); 10} 11 12#my-test-modal { 13 width: 700px; 14 margin: 10em auto; 15 padding: 20px; 16 border: 2px solid #000; 17 border-radius: 4px; 18 background: #fff; 19 z-index: 1002; 20} 21 22#my-test-close { 23 position: relative; 24 float: right; 25 margin: -10px; 26 cursor: pointer; 27} 28 29#my-test-content { 30 text-align: center; 31 padding: 10px; 32} 33 34#my-test-code { 35 display: none; 36} 37 38#my-test-icon { 39 display: none; 40}
my-test.js
JavaScript
1(function() { 2 tinymce.create('tinymce.plugins.mytest', { 3 init: function(ed, url){ 4 ed.addButton('my_test',{ 5 title: 'my-test', 6 cmd: 'insert_my_test' 7 }); 8 ed.addCommand('insert_my_test', function() { 9 document.getElementById("my-test-overlay").style.display = 'block'; 10 }); 11 }, 12 createControl: function(n, cm) { 13 return null; 14 } 15 }); 16 tinymce.PluginManager.add('my_test',tinymce.plugins.mytest); 17})();
試したこと
挿入ボタンでgetElementalByIdでtinymce部分を取得しようとしましたが上手くいきませんでした。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。