freoカスタマイズ集

TinyMCEを4.7以上にする

その1) サーバにアップして使用する

1. TinyMCE4のダウンロードページ のページにある「Download TinyMCE Community」にある「DOWNLOAD」からダウンロードします（メールアドレスを登録せよというポップアップが出ますが無視してOK）。
2. tinymce_4.x.x.zip を解凍して、tinymce/js/ 内の tinymce/ を取り出します。
3. 取り出した tinymce/ をfreoの tinymce/ に上書きアップします。

その2) cloud.tinymce.comのCDNによる更新

1. TinyMCEのAPIキーを取得します（取得しなくても使用できますが、投稿画面を開くたびに「ドメインが未登録」というアラートが表示されます）。
   SignUpのページからアカウントを登録して、ログインします。
   API Key Managerを選択し、MANAGEボタンを押します。
   TinyMCEを使用するサイトのドメインを入力してUPDATE API KEYボタンを押します（ポート番号の登録は特に不要）。
   詳しい方法はTinyMCEのブログ（英語）に記載されています。
2. templates/admin/header.html の
   

   <script type="text/javascript" src="{$freo.core.http_url}tinymce/tinymce.min.js"></script>

   の部分を、

   <script type="text/javascript" src="https://cloud.tinymce.com/dev/tinymce.min.js?apiKey=取得したAPIキー"></script>

   を変更（緑字を赤字に）します。
   ※2017/10/27現在、https://cloud.tinymce.com/stable/tinymce.min.js（安定版）のTinyMCEのバージョンが4.6.7のため、https://cloud.tinymce.com/dev/tinymce.min.js（開発版）を使用してください（赤字の部分はこちらに記載されているバージョンの使用が可能です）。⇒【2017/12/11更新】2017/12/5の更新により https://cloud.tinymce.com/stable/tinymce.min.js（安定版）のバージョンが4.7.4になったので使用が可能となりました。

その3）cdn.tinymce.comのCDNによる更新

1. templates/admin/header.html の
   

   <script type="text/javascript" src="{$freo.core.http_url}tinymce/tinymce.min.js"></script>

   の部分を、

   <script type="text/javascript" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

   を変更（緑字を赤字に）します。

※【2017/10/27現在】その2、その3のCDN（Ver.4.7.1）ではmobile版のバージョンが古いベータ版のようで、タブレットで表示できないなどダウンロード版と異なるようです。⇒【2018/03/11更新】現在はver4.7.9になり、ちゃんと表示されています。

TinyMCEの設定方法

js/admin.js の //TinyMCE 以降の部分に、

  mobile: {
    theme: 'mobile'
  },

を追加します。

Mobile版の使用方法

※Android7.0のChromeで使用しています。

TinyMCE4.7.1を導入し、AndroidのChromeでエントリー投稿画面を開くとエディタの真ん中に ブックのアイコンボタンが見えるのでそれをタップします。

以下のような画面になるので、右下の編集ボタンをタップします（前の画面に戻るときは左上の←ボタンをタップします）。

以下のように上部にツールバーが表示されます。

画面の白い部分に記事を入力します。

上記ツールバーでは、元に戻す、やり直す、書式(T)、太字(B)、斜体(I)、箇条書きリスト、番号付き箇条書きリスト、リンク、画像（ツールバーをスライドすると表示）が入っています。

リンクを入れる場合は、

1. ツールバーにあるリンクボタンをタップします。
2. リンク先のURLを入力します。
   
3. リンク元のテキストを入力します。必要があれば、タイトル、ターゲットを入力します。
   
4. キーボードの決定をタップすると、リンクが入力されます。
   

カメラ（画像）のボタンをタップすると、関連アプリが表示されます。

画像を選択すると、

左上のチェックマークボタンをタップします。

再度→ボタンをタップします。

投稿画面に戻るので、登録するボタンをタップすると記事が登録されます。

でも、これをPCで見ると...

になってしまうし、画像がfilesフォルダに保存されるわけではなく、編集もできないので、即削除してしまいました(^_^;)

画像をフォルダに登録する方法はこのあたりに記載されているのですが、mobile版でも通用するのかイマイチわかりません。

まだまだ改善の余地がありそうなので、もうちょっと様子を見たほうがいいかもしれません。