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

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);

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

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

$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用には絵文字画像が表示されて、携帯では表示されないのは残念なので、対応させるには、以下のフォルダに

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

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