記録

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

TinyMCE 5.0の記事が好評だったので前回に続き、windowManager.openUrl使用してコードの送受信の内容を記載します。あくまでもサンプルコードです。プログラムなので他にもやり方はあると思います。前回の記事に勘どころは記載していますので割愛します。尚、自分は英語がダメダメですが幸いコードを読む力はある程度あるので何とかなりました。サンプルコードを記載しますので解析してみてください。

PHP&HTMLコード

<!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">
        <textarea name="htmlcode1" class="form-control">
<?php
    echo urldecode($_GET["sdata"]);
?>
        </textarea>
        <input type="button" name="submitbtn" value="htmlcode-submit"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                if(/htmlcode/.test(data[i].name)){
                    data[i].value = encodeURIComponent(data[i].value);
                }
                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>

jsコード

(function() {
    tinymce.create('tinymce.plugins.btxt', {
        init : function( ed,  url) {
            //console.log(ed);
            act = function(e)
            {
                    //console.log("e=",encodeURIComponent(e.selection.editor.getContent()));
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: 'HTMLCODE',
                    url:url + "/btxt.php?sdata=" + encodeURIComponent(e.selection.editor.getContent()) ,
                    onMessage:function(api, details){
                      console.log(e);
                      //console.log('htmlcode1',decodeURIComponent(details.data.htmlcode1));
//                      var editorInstance = tinymce.editors[0];
                      e.selection.editor.setContent(decodeURIComponent(details.data.htmlcode1));
                   }
                }
                );
            };
              ed.ui.registry.addButton('btxt',{
                title : 'htmlcode',
                text: 'htmlcode',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.btxt',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('btxt', tinymce.plugins.btxt);
})();



【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

TinyMCE 5.0でオリジナルプラグイン作成するはググれば何とかなるが?前のページ

変なコードを書いてしまった。それはいつものこと(笑)次のページ

関連記事

  1. 記録

    不覚、会社で知ったカラーミーショップ。

    カラーミーショップって何だろう?簡単に説明するならば、安価でネット…

  2. 記録

    その人、意識高い系2!

    今日のお題は「その人、意識高い系2!」です。なぜ、2なのかというと…

  3. 記録

    ミニ四駆懐かしい響きですって思っていたら今も健在!!

    小学生時代に改造に改造を加えて遊んでいたのが懐かしいですって思って…

  4. 記録

    黙ってホッとこ。

    なんだか黙ってホッとこ。世の中、うまく出来ていると思います、結果…

  5. 記録

    コカ・コーラのアレが当たりましたよ。マルチ充電ケーブルw

    確率的に高いのか、どうか分かりません。…

  6. 記録

    FF14を自動起動させてパスワード入力を

    Power Automate Desktop使用してFF14を自動起…

2019年8月
 1234
567891011
12131415161718
19202122232425
262728293031  

カテゴリー

PAGE TOP