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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

1506閲覧

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

popozure

総合スコア6

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2019/08/03 02:48

編集2019/08/05 07:38

前提・実現したいこと

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部分を取得しようとしましたが上手くいきませんでした。

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

JavaScript

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

投稿2019/08/05 07:55

popozure

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2019/08/05 04:27

hideyuki.motoo

総合スコア72

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

popozure

2019/08/05 04:31

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

2019/08/05 04:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問