CKEditor×CKFinderで入力したテキストを、携帯端末にも表示させたい ITかあさん

ITかあさん

CKEditor×CKFinderで入力したテキストを、携帯端末にも表示させたい

CKEditor×CKFinderで入力したテキストを、携帯・スマートフォンサイトにも表示させたい!

CKEditor×CKFinderで入力したテキストを、携帯端末にも表示させたい
以前、テキストエリアのフォームパーツにリッチエディタ機能が導入出来る、CKEditorとCKFinderについて紹介しました。

こんな素敵なエディタ機能を意図も簡単に導入出来るわけですから、

携帯サイト・スマートフォンサイトにだって表示したいですよね!そうですよね!

なお、誤解の無いように先に言っておきますと、エディタ機能を携帯に導入するわけではなく、

CKEditorとCKFinderを使って入力したものを携帯・スマホに表示する方法

です。

え?CKEditorとCKFinderそのままでは携帯・スマホには不向きなの?

せっかく導入したCKEditorとCKFinderですが、携帯・スマホ向けに表示させるにはちょっとした工夫が必要になります。

携帯・スマホにはリサイズ画像を表示するよ!

CKFinderも合わせて導入すると、画像をアップロードした後にサーバーブラウザーにアクセスすると サムネイルが生成されます。

CKFinderの自動生成サムネイルを携帯・スマートフォンで使う

PC用で使った画像をそのまま携帯に表示させるのはちょっとね~・・
と、いうことで自動で生成されるサムネイルファイルを携帯端末用に利用してしまおう!

config.php

config.phpの97行目付近でメインで生成されるサムネイルの設定を行うことが出来ます。サムネイルサイズの設定はこちらで行えばOKです。

$config['Thumbnails'] = Array(
		'url' => $baseUrl . '_thumbs',
		'directory' => $baseDir . '_thumbs',
		'enabled' => true,
		'directAccess' => false,
		'maxWidth' => 150,
		'maxHeight' => 150,
		'bmpSupported' => false,
		'quality' => 80);
$baseDirで指定したフォルダの下に_thumbsフォルダを無ければ設置してパーミッションを777に。

携帯・スマートフォンの出力部分

後は出力部分。この出力時にコツがあり、$hoge[‘Model’][‘text’]の中にCKFinderからの画像も含まれるテキストだとしたら、

CKEditorでの画像スタイルを除去しつつ、画像のディレクトリをサムネイルフォルダに置き換えを行う処理は以下になります。
$hoge['Model']['text'] = preg_replace('/(\]+)(style\=\"[^\"]+\")([^>]+)(>)/', '${1}${3}${4}', $hoge['Model']['text']);
echo str_replace("/images", "/_thumbs/Images", $hoge['Model']['text']);

こうすることで、PC用に投稿された画像を、サムネイル画像に変換しつつ、重要なのが

画像スタイルの除去。

これをやらないと PC画像用に引き伸ばされたスタイルが当てられらままになるのです。

CKEditorの絵文字を携帯にも対応させたい!

絵文字機能がCKEditorには用意されていますね。本物の携帯絵文字に変換してくれるわけではないのですが、PC用には絵文字画像が表示されて、携帯では表示されないのは残念なので、対応させるには、以下のフォルダに

ckeditor/plugins/smiley/

_thumbs/Imagesフォルダを追加します。

ckeditor/plugins/smiley/_thumbs/Images

ckeditor/plugins/smiley/フォルダに、絵文字画像が全て含まれているので、ディレクトリの中身をコピーし、先ほど追加したこちらのディレクトリに設置すればOK!

ckeditor/plugins/smiley/_thumbs/Images
初夏のJavaScript祭 in サーキュレーションビル ForPro