Meterial Design LightとTinyMCEの干渉を防ぐ #JavaScript

問題

Meterial Design LightのテンプレートとTinyMCEを一緒に使ったらテキストエリアが動かなくなった。

解決方法

全く同じ問題がGitHubのissueにあったのでそのまま利用。

TinyMCE Editor not working with Google Meterial Light framwork

document.addEventListener('mdl-componentupgraded', function(e){
//In case other element are upgraded before the layout  
    if (typeof e.target.MaterialLayout !== 'undefined') {
        tinymce.init({
            //ここから下は環境に合わせて適宜変更
            selector: "textarea",
            height: 400,
            skin: "material",
            language: "ja", // 言語 = 日本語
            plugins: [
                'textcolor advlist autolink lists link image charmap anchor',
                'searchreplace visualblocks fullscreen',
                'insertdatetime media table contextmenu paste jbimages'
            ],
            menubar: false,
            relative_urls: false,
            toolbar: 'insertfile undo redo | styleselect fontsizeselect forecolor | bullist numlist outdent indent | link jbimages table',
        });
    }
});

おまけ

せっかくなのでTinyMCEの各種設定/リンク先など

TinyMCEのダウンロードと日本語化

DL

本体：https://www.tinymce.com/download/
言語パッケージ：https://www.tinymce.com/download/language-packages/

設置

DLしたzipを解凍後、本体の\jsの中にあるtinymceを任意の場所に置く。階層が深くなってるので注意。
設置しtinymce\langs内に言語パッケージ内のja.jsを置けばOK。

html内に以下コードを記載
※srcのリンク先は自分がtinymceを置いた場所に

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/tinymce/tinymce.min.js"></script>
    <script>
    tinymce.init({
        selector: "textarea", // textareaにTinyMCEを適用
        language: "ja", // 言語 = 日本語
    });
    </script>
</head>
<body>
    <textarea>ここに文章を入力</textarea>
</body>
</html>

これで最低限の利用はできます。

画像をアップロードして編集

jbimagesというプラグインを利用して、テキストエリア内にローカルの画像を貼り付けつつサーバーの任意の場所にアップロードします。
jbimagesプラグイン
DLはGitHub
https://github.com/vikdiesel/justboil.me

設置手順

DLしたzipを解凍してtinymceのpluginフォルダにいれる(jbimagesにリネームする必要がありました)
直下のconfig.php内の$config['img_path'] = '/images';のパスをアップロードしたいパスに書き換え
html内のスクリプトを書き換え(詳細は公式が詳しいです)

    tinymce.init({
        selector: "textarea", // textareaにTinyMCEを適用
        language: "ja", // 言語 = 日本語
        relative_urls:false,
        plugins: 'jbimages',
        toolbar: 'jbimages',
    });

いろいろ英語なので日本語化したい場合はWYSIWYGエディタTinyMCEプラグインjbimagesを日本語化してみたがおすすめです。
※操作自体は直感的にできるのでそのままでも使えないことはないです。

エディタの見た目を変える

TinyMCE - Skin Creator：http://skin.tinymce.com/
ここで自分の好きなようにカスタマイズしてdownloadをクリックすると自分のつけた名前でzipが生成されるので、それをtinymce\sukinsに置いて、htmlに以下追記でOK

    tinymce.init({
        selector: "textarea", // textareaにTinyMCEを適用
        language: "ja", // 言語 = 日本語
        relative_urls:false,
        plugins: "jbimages",
        toolbar: "jbimages",
        skins: "mycolor", //自分で作ったフォルダ名
    });

最終的な自分設定(メモ)

        <script src="js/tinymce/tinymce.min.js"></script>
        <script>
        document.addEventListener('mdl-componentupgraded', function(e){
        //In case other element are upgraded before the layout  
            if (typeof e.target.MaterialLayout !== 'undefined') {
                tinymce.init({
                    selector: "#info",
                    height: 400,
                    skin: "material",
                    language: "ja", // 言語 = 日本語
                    plugins: [
                        'textcolor advlist autolink lists link image charmap anchor',
                        'searchreplace visualblocks fullscreen',
                        'insertdatetime media table contextmenu paste jbimages'
                    ],
                    menubar: false,
                    relative_urls: false,
                    toolbar: 'insertfile undo redo | styleselect fontsizeselect forecolor | bullist numlist outdent indent | link jbimages table',
            }
        });
        </script>

Meterial Design LightとTinyMCEの干渉を防ぐ

問題