記録

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ファイルに下記の記載を行います。
<!DOCTYPE html>
<!--[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は下記のようになります。
(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://www.zip358.com',
            infourl : 'https://www.zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('language_boon', tinymce.plugins.language_boon);
})();
公式ページは下記のリンクより https://www.tiny.cloud/docs/ui-components/urldialog/#urldialoginstanceapi サンプルサイトはこちら https://www.zip358.com/tool/editor/    

活動支援よろしくお願いします

phpでイマドキDB接続の仕方なの?前のページ

TinyMCE 5.0でwindowManager.openUrl使用してコードの送受信。次のページ

関連記事

  1. 記録

    プログラミングって何から勉強したら良いの?パソコンが有れば無料で勉強できる方法。

    プログラミングって何から勉強したら良いの?答えは通称js(ジェ…

  2. 記録

    新妻免疫塾 K&L Immunology Club

    免疫のことを優しく解説しているサイト、YOUTUBEというカテ…

  3. 記録

    中国古典の知恵に学ぶって本を買いました。

    「中国古典の知恵に学ぶ」って本を買いました。半分ぐらい…

  4. 記録

    ホリエモンの言ったことが現実に成りつつ有るなと思います。

    近畿大学の卒業式で語ったことが何だか現実になりつつあるなと思い…

  5. 記録

    映画、DUNE/デューン砂の惑星を観ました。これは序章だな…。

    映画、DUNE/デューン 砂の惑星を観ました、呪わた企画のリメイクは…

  6. 記録

    香南市みなこい港まつり花火2018に行ってきましたよ。

    香南市みなこい港まつり花火2018に行ってきましたよ。写真ではなく…

2019年7月
1234567
891011121314
15161718192021
22232425262728
293031  

カテゴリー

PAGE TOP