記録

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://www.zip358.com',
            infourl : 'https://www.zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('btxt', tinymce.plugins.btxt);
})();

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

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

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

関連記事

  1. 記録

    ついに買わないといけない時がきました。まだ買わないけど。

    ついに買わないといけない時がきました。そう、メガネを買わないといけな…

  2. 記録

    FF14をプレイしています。土日祝の朝頃から

    先日からFF14をプレイしています、まだFF14の中でもソロです、ヘ…

  3. 記録

    インプットとアウトプットを繰返しても意味をなさない?

    インプットとアウトプットを繰返しても意味をなさないと思っている方も多…

  4. 記録

    イラストレーター使用して1週間ぐらい経過しましたよ。

    まだまだ駄目だけど、1週間イラストレーターを使用して出来ることも増…

  5. 記録

    小利口、動かないひとびと(じぶんを含む)。

    堀江貴文氏、云わく動かないひとびと(じぶんを含む)を小利口と呼ぶら…

2019年8月
 1234
567891011
12131415161718
19202122232425
262728293031  

カテゴリー

PAGE TOP