javaScript

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

関連記事

  1. jquery

    jQueryの基礎1

    世の中、javascriptへの原点回帰が進んでいますがだからとい…

  2. PHP

    会社でLaravel開発するみたい。

    会社でLaravel開発するみたいな事を言っていた。自分が…

  3. PHP

    ちょっとした物。InstagramのAPI取得する

    Instagram(インスタグラム)の画像などが取得することが…

  4. Bat処理

    動画を無音声に変換するバッチ

    こらからプログラムしている所のVlogを撮ろうと月曜日に、…

  5. javaScript

    ★画像をタイル状に分離して一括ダウンロードさせるジェネレーター

    画像をタイル状に分離して一括ダウンロードさせるジェネレーターを…

  6. javaScript

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

    TinyMCE 5.0で独自のプラグインを開発するにあたって…

2019年8月
« 7月   9月 »
 1234
567891011
12131415161718
19202122232425
262728293031  
PAGE TOP