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

20190727

Logging

TinyMCE 5.0で独自のプラグインを開発するにあたって
ググれば4.0で作成する方法は山ほど例題があるのだけど5.0は
非常に少ないtinymce.windowManager.openを使用してのプラグインは
5.0でも案外簡単に見つかるのだけど、tinymce.windowManager.openUrlを
使用しての情報はググってもない。
唯一、公式サイトが記載しています。
しかし残念なことに全て英語で書かれています。

日本語で記載しろよという話だけど・・・・。
で!!tinymce.windowManager.openUrlで
何が出来るかと言えば外部ファイルを
読み込みが出来てそのレスポンスを受け取る事が出来るのです。
英語が嫌いでも原文で英語を読め!!ですよ・・・。
答えはそのページに書いているのですね。
※ちなみに会社でこの機能(e.windowManager.openUrl)を
使用し開発中です。
たぶん、自分みたいに困っている人もいると思うので
基本的な部分を記載しています、なお自作プラグインの作り方は
理解しているという前提で記載しています。
まず例としてPHPファイルを読み込みたいのなら
自作プラグインの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">
        <input type="text" name="L_japan" class="form-control">
        <input type="text" name="L_English" class="form-control">
        <input type="button" name="submitbtn" value="恩恵を受ける"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                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>

PHPファイルはこのような感じでjavascriptが大事ここで、
submitを行っています。
当然、JSON形式で返却しましょう。公式ページにも書かれいますが
mceActionで制御しましょう。
プラグイン側のJSは下記のようになります。

(function() {
    tinymce.create('tinymce.plugins.language_boon', {
        init : function( ed,  url) {
            console.log(ed);
            act =function(ed)
            {
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: '恩恵を受ける',
                    url:url + "/language_boon.php",
                    onMessage:function(api, details){
                      console.log(api, details);
                      console.log('オレオレjapan', details.data.L_japan);
                      console.log('オレオレEnglish', details.data.L_English);
                   }
                });
            };
            // window.addEventListener('message', function (event) {
            //   console.log(event);
            //   var data = event.data;
            //   console.log(data.data);
            //   if(ed.settings.id == data.data.id_){
            //     console.log('オレオレjapan', data.data.L_japan);
            //     console.log('オレオレEnglish', data.data.L_English);
            //   }
            // });
              ed.ui.registry.addButton('language_boon',{
                title : '恩恵を受ける',
                text: '恩恵',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.language_boon',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('language_boon', tinymce.plugins.language_boon);
})();

公式ページは下記のリンクより
https://www.tiny.cloud/docs/ui-components/urldialog/#urldialoginstanceapi
サンプルサイトはこちら
https://zip358.com/tool/editor/
 
 

タグ

4.0, 5.0, open, openUrl, TinyMCE, windowMan, windowManager, オリジナル, こと, サイト, ファイル, プラグイン, ページ, レスポンス, , 会社, , 作成, 使用, 例題, 全て, 公式, 原文, 唯一, 外部, 嫌い, 山ほど, 情報, 方法, 日本語, 機能, 残念, 答え, 簡単, 英語, 記載, , 開発,


phpでイマドキDB接続の仕方なの?

20190720

Logging

実行していないので上手く動いているかは
未知数ですが、コードの書き方はイマドキの書き方に
しています。PHP公式ではこう書かれています。

プリペアドステートメントのパラメータに変数をバインドすると・・・。
i 対応する変数の型は integer です。
d 対応する変数の型は double です。
s 対応する変数の型は string です。
b 対応する変数の型は blob で、複数のパケットに分割して送信されます。

<?php
$servername = "hostname";
$dbname ="dbname";
$dbusername = "root";
$dbpassword = "pass";
if($conn = mysqli_connect($servername,$dbusername,$dbpassword,$dbname)){
    $sql = "select username from mastertbl where uid =? and password = ?";
    $stmt = mysqli_stmt_init($conn);
    if(mysqli_stmt_prepare($stmt,$sql)){
        mysqli_stmt_bind_param($stmt,"ss",$uid,password_hash($password,PASSWORD_DEFAULT));
        mysqli_stmt_execute($stmt);
        mysqli_stmt_store_result($stmt);
        if($cnt=mysqli_stmt_num_rows($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            for($i=0;$i<$cnt;$i++){
                $row = mysqli_fetch_assoc($result);
            }
        }
    }
    mysqli_stmt_close($stmt);
    mysqli_close($conn);
}

タグ

blob, conn, connect, db, dbname, dbpassword, dbusername, double, hostname, if, Integer, lt, mysqli, pass, php, root, select, servername, SQL, string, user, イマドキ, コード, バインド, パケット, パラメータ, プリペアドステートメント, 仕方, 公式, 分割, , 変数, 実行, 対応, 接続, 書き方, 未知数, 複数, 送信,


SQLの無知さ加減。

20190713

Logging

select id,namae,furigana
from passport
where id = ANY(select id from travellist where namae like "田中%");

自分のSQLに関しての無知さ加減は半端ないと思います。
メンターがいないので自分で調べないといけないのです、
こんな構文すら知らなかったのは痛い。
サブクエリの存在は前から知っていたのですが、ANYを前に
付けると、複数のHITにも対応できることを知った。
ちなみに更新作業や削除作業の際に
主キーを検索対象に入れていないと処理がもっさりします。
そう考えると一番最初に働いていたIT会社のSQLは
今思うと初歩的な構文が多かったのかもしれない。
何気ない事なのかもしれないけど
動いていた構文に追加対応とか行う際にもっとその構文を
解析すれば良かったなと思います。
やはりSQLで行ったほうが早いことって結構あります。
 

タグ

ANY, from, furigana, HIT, ID, IT, like, namae, passport, select, SQL, travellist, where, キー, クエリ, こと, サブ, はり, メンター, , , 会社, 作業, 処理, 削除, , 加減, 半端, 存在, 対応, 対象, 更新, 最初, 検索, 構文, 無知, 田中, 自分, 複数, 解析, 追加, ,


node-sassをインストールしてコンパイルするときに「あぁうっかり」

20190706

Logging

npm install node-sass

上記の記述でインストールします。Node.jsはインストール済みだという
前提で!
コンパイルの仕方はこんな感じです。

node-sass test.scss test.css  --output-style expanded

ここでうっかりミスを犯さないで!!SCSSとSASSは記述が違います。
自分はSCSSで記述していたのに、拡張子がSASSになってまして
意味不明の一行目でエラーですとはじかれていた・・・。
ちなみにオプション値を付けずにコンパイルすると
インデントが崩れて美しくないのでオプション値を付けるように
しています。

タグ

--output-style, css, expanded, install, JS, node, node-sass, npm, SASS, scss, test, インストール, インデント, エラー, オプション, ここ, コンパイル, とき, ミス, 一行, 上記, 不明, 仕方, 前提, 意味, 感じ, 拡張子, 自分, 記述,