7月, 2019 | Be Yourself

小中大

☀️🌙

Home > 2019年 > 7月

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

2019年07月27日

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

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/

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2019年07月27 08:28日

タグ

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

Home > 2019年 > 7月

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

2019年07月20日

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

実行していないので上手く動いているかは
未知数ですが、コードの書き方はイマドキの書き方に
しています。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);
}

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年07月20 12:00日

タグ

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

Home > 2019年 > 7月

SQLの無知さ加減。

2019年07月13日

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

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

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

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年07月13 03:08日

タグ

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

Home > 2019年 > 7月

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

2019年07月06日

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

npm install node-sass

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

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

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

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年07月06 12:00日

タグ

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

@Blog

過去の蓄積を見るために書く日記.

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

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

SQLの無知さ加減。

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