記録

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

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

    行動力が凄いですITエンジニアYOUTUBER{いまは未経験?}

    未経験ITエンジニアYOUTUBERタカモリさんが凄いです。何が凄い…

  2. 記録

    読んでもらいたいと思って記事を書いている?

    人様に読んでもらいたいと思って記事を書いているわけでもないのだけど…

  3. 記録

    欲しい物リスト。

    マックブックプロ(MacBook Pro)です、アプリ開…

  4. 記録

    demo23、javascriptの非同期同期処理🐋

    https://www.youtube.com/watch?v=a…

  5. 記録

    オレオレ無名関数の再帰処理。

    無名関数はよく使います。ちょっとしたモノを書きたい時、オレオレ無…

PAGE TOP