# TinyMCE 5.0でオリジナルプラグイン作成するはググれば何とかなるが？
TinyMCE 5.0で独自のプラグインを開発するにあたって ググれば4.0で作成する方法は山ほど例題があるのだけど5.0は 非常に少ないtinymce.windowManager.openを使用してのプラグインは 5.0でも案外簡単に見つかるのだけど、tinymce.windowManager.openUrlを 使用しての情報はググってもない。 唯一、公式サイトが記載しています。 しかし残念なことに全て英語で書かれています。日本語で記載しろよという話だけど・・・・。 で！！tinymce.windowManager.openUrlで 何が出来るかと言えば外部ファイルを 読み込みが出来てそのレスポンスを受け取る事が出来るのです。 英語が嫌いでも原文で英語を読め！！ですよ・・・。 答えはそのページに書いているのですね。 ※ちなみに会社でこの機能（e.windowManager.openUrl）を 使用し開発中です。 たぶん、自分みたいに困っている人もいると思うので 基本的な部分を記載しています、なお自作プラグインの作り方は 理解しているという前提で記載しています。 まず例としてPHPファイルを読み込みたいのなら 自作プラグインのPHPファイルに下記の記載を行います。
```javascript
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/tool/bootstrap/css/bootstrap.css">
<script src="/tool/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form method="post">
<input type="text" name="L_japan" class="form-control">
<input type="text" name="L_English" class="form-control">
<input type="button" name="submitbtn" value="恩恵を受ける"class="btn btn-primary">
</form>
<script>
var chageJson = function(data) {
console.log(data);
var JsonData = [];
for (i = 0; i < data.length; i++) {
JsonData[data[i].name] = data[i].value
}
//console.log(JSON.stringify(data));
return JsonData;
}
$("[name=submitbtn]").on("click",function(){
data = chageJson($("form").serializeArray());
window.parent.postMessage({ mceAction: 'customAction',data:data});
window.parent.postMessage({ mceAction: 'close' });
});
</script>
</body>
</html>
```
PHPファイルはこのような感じでjavascriptが大事ここで、 submitを行っています。 当然、JSON形式で返却しましょう。公式ページにも書かれいますが mceActionで制御しましょう。プラグイン側のJSは下記のようになります。 ```javascript
(function() {
tinymce.create('tinymce.plugins.language_boon', {
init : function( ed, url) {
console.log(ed);
act =function(ed)
{
ed.windowManager.openUrl(
{
type: 'panel',
title: '恩恵を受ける',
url:url + "/language_boon.php",
onMessage:function(api, details){
console.log(api, details);
console.log('オレオレjapan', details.data.L_japan);
console.log('オレオレEnglish', details.data.L_English);
}
});
};
// window.addEventListener('message', function (event) {
// console.log(event);
// var data = event.data;
// console.log(data.data);
// if(ed.settings.id == data.data.id_){
// console.log('オレオレjapan', data.data.L_japan);
// console.log('オレオレEnglish', data.data.L_English);
// }
// });
ed.ui.registry.addButton('language_boon',{
title : '恩恵を受ける',
text: '恩恵',
onAction:function(){act(ed)}
});
},
getInfo : function() {
return {
longname : 'tinymce.plugins.language_boon',
author : 'taoka',
authorurl : 'https://zip358.com',
infourl : 'https://zip358.com',
version : '1.0'
};
}
});
tinymce.PluginManager.add('language_boon', tinymce.plugins.language_boon);
})();
```
公式ページは下記のリンクより <https://www.tiny.cloud/docs/ui-components/urldialog/#urldialoginstanceapi>サンプルサイトはこちら <https://zip358.com/tool/editor/> [  ネガティブ思考は駄目なのか本当にそう？
](https://zip358.com/2026/02/06/%e3%83%8d%e3%82%ac%e3%83%86%e3%82%a3%e3%83%96%e6%80%9d%e8%80%83%e3%81%af%e9%a7%84%e7%9b%ae%e3%81%aa%e3%81%ae%e3%81%8b%e6%9c%ac%e5%bd%93%e3%81%ab%e3%81%9d%e3%81%86%ef%bc%9f.html)
[  成功体験と成功の模倣.
](https://zip358.com/2026/02/05/%e6%88%90%e5%8a%9f%e4%bd%93%e9%a8%93%e3%81%a8%e6%88%90%e5%8a%9f%e3%81%ae%e6%a8%a1%e5%80%a3.html)
[  サイトを分離した話を黙々と書いていきます.
](https://zip358.com/2026/02/04/%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%88%86%e9%9b%a2%e3%81%97%e3%81%9f%e8%a9%b1%e3%82%92%e9%bb%99%e3%80%85%e3%81%a8%e6%9b%b8%e3%81%84%e3%81%a6%e3%81%84%e3%81%8d%e3%81%be%e3%81%99.html)
[  半額セールでアドビ様を延長.
](https://zip358.com/2026/02/03/%e5%8d%8a%e9%a1%8d%e3%82%bb%e3%83%bc%e3%83%ab%e3%81%a7%e3%82%a2%e3%83%89%e3%83%93%e6%a7%98%e3%82%92%e5%bb%b6%e9%95%b7.html)
[  何の前触れもなく変えたのは初めてかも.
](https://zip358.com/2026/02/02/%e4%bd%95%e3%81%ae%e5%89%8d%e8%a7%a6%e3%82%8c%e3%82%82%e3%81%aa%e3%81%8f%e5%a4%89%e3%81%88%e3%81%9f%e3%81%ae%e3%81%af%e5%88%9d%e3%82%81%e3%81%a6%e3%81%8b%e3%82%82.html)