ユーティリティ

2017年11月

- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

TinyMCEのmobile版を試してみました

  • 2017/10/27 20:51New!
  • カテゴリー:TinyMCE4

freo1.20.0に同梱されているTinyMCEはv4.6.6ですが、TinyMCE v4.7.0から新たにmobile版が搭載されたので試してみました。

ちなみにmobile版は、Android6以上のchrome(スマホのみ)またはiOS10以上のsafari(iPhone,iPad)でのみ使用可能です。

 

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(開発版)を使用してください(赤字の部分はこちらに記載されているバージョンの使用が可能です)。
その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版のバージョンが古いベータ版のようで、タブレットで表示できないなどダウンロード版と異なるようです。

 

TinyMCEの設定方法

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

	mobile: {
		theme: 'mobile'
	},

 を追加します。

 

Mobile版の使用方法

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

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

以下のような画面になるので、右下の編集ボタンをタップします(前の画面に戻るときは左上の←ボタンをタップします)。
Screenshot_20171024-094912.png

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

画面の白い部分に記事を入力します。
Screenshot_20171024-095109.png

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

リンクを入れる場合は、

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

カメラ(画像)のボタンをタップすると、関連アプリが表示されます。
Screenshot_20171024-095421.png

画像を選択すると、
Screenshot_20171024-095554.png

左上のチェックマークボタンをタップします。
Screenshot_20171024-095642.png

再度→ボタンをタップします。
Screenshot_20171024-095706.png

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

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

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

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

 

 
 

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)