CKEditor4.5をiPhoneで快適に使う方法

2017-02-21   

最近自作ブログ管理システムのリニューアルをする機会が何度かあってブラウザで動くwysiwygエディタをいくつかテスト導入しました。wysiwygエディタは数年前から導入してるけどいずれもバージョンが古いので新し目のやつに置換したく色々調べた。以下のブログがとてもよくまとまってて素晴らしく参考になりました。

Web業務システムでも使えるWYSIWYGエディタ×10選 hifive開発者ブログ

んで、上記ブログで紹介されているエディタを一通りテスト導入してみたものの、全部「帯に短したすきに長し」なんですよね~(´・ω・`)

散々あれこれ試して結局定番のCKEditorに落ち着きましたw けどJS多すぎで重かったバージョン3の代より現行のバージョン4は比較的軽くて良い感じです(プラグインの数に依存しますが)。PCで使うには無問題。けどiPhoneで使うとなると話が変わってきます。

CKEditor4.5をiPhoneで快適に使う方法

いろいろと調べた結果、iPhone(iOS)でCKEditor4を快適に使うには以下の2つのCSSを設定すればOKな感じ。

.cke_editable img{
width:90px !important;
}

.cke_editable{
    font-size: 20px;
}

 

iPhone+wysiwygエディタでブログを更新するさいに一番厄介なのが「画面が小さい」「変にズームインされる」です。

複数の写真をUPした日にゃ本文書くのが超大変!てことで、CKEditorのTEXTAREA内の画像は強制的に小さくします。それが img{width:90px}の部分。

そして「変にズームインされる問題」。これはiOSの仕様みたいです。標準のサファリでも後入れChromeでも同じ挙動します。フォームに文字を入れようと入力欄をアクティブにすると勝手に画面がズームインして、入力後にちゃんと元のサイズに戻らず「ムキーーーー」ってなるトラブル。あれを防ぐにはフォームのフォントサイズを16px以上にすればOKなんだそう。ってことで、老眼対策も含めCKEditorのTEXTAREA内のフォントサイズを20ピクセルに指定。

21AHIAK9yAYuZaEa.jpg

たったこの2行をcontents.cssにいれるだけでiPhoneでもめっちゃ快適に入力可能になります(-ω☆)

カテゴリ:PC・スマホ・WEBネタ

UNITORO以外の最近の投稿

N/A

twitter

Recent entries

fRCuQMu7B7G2j5r4.jpg

ローランスHDS3・Tiでついにリアルタイム等深線マップ作成が可能に!?

uF4GDnWEslXvgOD7.jpg

B.A.S.Sエリート第1戦ウィニングルアー

picture from keitai

バレンタインスペシャル

3g_4ErKJATHUKh1n.jpg

2017年のJBTOP50はボートが3種類必要

l2N0atqBA5GYK8L4.jpg

釣り道具をアメリカから輸入したときの関税について

uZHPQ2sq8peb1soI.jpg

久々にダラダラと駄文を書いてみる

SEdbip8SZMwsy8ZJ.jpg

「文字小さくておっさん泣かせ」スマホサイトの最適な文字サイズは?

2016シーズン榛名湖バス釣りオレなりのまとめ7月~11月編

0crVXm8ypaDHEpWs.jpg

八郎潟の放流量と水位がリアルタイムでわかるサイト

_m4pI4GcuBXQRtGL.jpg

2016シーズン榛名湖バス釣りオレなりのまとめ3月~6月編

s7Hc0LUZe4JeRus7.jpg

Windowsの画面操作を動画としてキャプチャしてくれる無料ソフト「AG-デスクトップレコーダー 」

AZAscIi9kasOd5Cm.jpg

iPhoneの写真がデカすぎて色々困った時はこのアプリで一発縮小

ナカバヤシ コレクションケース ミニ ワイド 透明アクリル棚板タイプ ブラックを1/43モデルカー用に買ってみた

oOIlFSnKCnVl5I74.jpg

お気に入りのルアーをディスプレイしてみる?

7JbZkxWrzSWgPkp6.jpg

Dマガジンで実際に読めるページをベストカー誌で比べてみた

15MDtpsjJF1bHHae.jpg

Google Chromeでアメブロが真っ白になるやつの解決方法

ゴルフ7ネタ『VW純正 インフォテイメントシステム Discover Proのブルートゥース割り込みについて』

ゴルフ7ネタ『VW純正 インフォテイメントシステム Discover Proのブルートゥース割り込み』問題解決に Anker® ポケットサイズ ポータブルワイヤレススピーカーを買った

WTzbkVq7CjCF9yl0.jpg

ひげ剃りの替刃が買えないトラップにはまらないようにamazonで買ってみた

UtWE7vntu7wOS91Y.jpg

2017年JBトップ50第2戦が開催される「弥栄ダム」についての予習

sqnxX2YC4ohzJ1lU.jpg

乾燥と爆風で

hvY3xPNnohpKWI4L.jpg

VW 6代目ポロよりも先にセアト・イビサ登場

t4jfQ1nxccr9lum9.jpg

Google日本語入力がクロームでめっちゃ重い問題を解決

YgLAjHrUCmWc_kYE.jpg

月額432円で170冊の雑誌が読めるDマガジンを契約してみた

0MFccg0zaXtZN5Tq.jpg

VWポロを初めて運転した結果・・・

TLESK3TyFF__QwKU.jpg

VWゴルフ7ネタ『タイヤ周りの異音が解消』

8AZ86eX76capbnmM.jpg

VW新型ティグアンに試乗してきた(-ω☆)

6IOjoBtPFX6wxFC8.jpg

iPhone6S/7でタップが効きづらいやつ→3Dタッチが原因か?

RhMcpiPwEjawjoiv.jpg

パソコン操作の効率化!キーボートショートカットを使う手癖をつけよう

picture from keitai

俺の旅2017予定

zPigYeAduWvqJnRY.jpg

レトロデジカメ「ソニーデジタルマビカ MVC-FD71」

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016