Meterial Design LightとTinyMCEの干渉を防ぐ

## 問題
[Meterial Design Lightのテンプレート](https://getmdl.io/templates/dashboard/index.html)とTinyMCEを一緒に使ったらテキストエリアが動かなくなった。

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

[TinyMCE Editor not working with Google Meterial Light framwork](https://github.com/tinymce/tinymce/issues/2395)

```js
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/)
言語パッケージ：[https://www.tinymce.com/download/language-packages/](https://www.tinymce.com/download/language-packages/)

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

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

```html
<!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プラグイン](http://justboil.me/)
DLはGitHub
[https://github.com/vikdiesel/justboil.me](https://github.com/vikdiesel/justboil.me)

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

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

いろいろ英語なので日本語化したい場合は[WYSIWYGエディタTinyMCEプラグインjbimagesを日本語化してみた](http://qiita.com/qwe001/items/5e047bfe707dee2f27a8)がおすすめです。
※操作自体は直感的にできるのでそのままでも使えないことはないです。

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

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

### 最終的な自分設定(メモ)
```html
        <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>
```

#### MDLのテンプレに合わせてスキン作ったので置いておきます
http://yahoo.jp/box/g9BYyU