記録

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. 記録

    映画、リバーズ・エッジを観て。

    http://movie-riversedge.jp/ 映画、リバ…

  3. 記録

    本気で生きてますか?

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

  4. 記録

    TOHOシネマ、一ヶ月フリーパスを!(´∀`)

    TOHOシネマ、一ヶ月フリーパスを手に入れました。これで毎日映画三昧…

  5. 記録

    知ってます?ちょいWINDOWS10便利機能。IT関係者は!

    知ってます?ちょいWINDOWS10便利機能。IT関係者は知っ…

  6. 記録

    寝る時間を削っても。

    寝る時間を削っても勉強しないという事がわかりました。今まで勉強して…

PAGE TOP