CKEditorで画像サイズの指定を変更。

2015.01.12 / Notes

CKEditorの編集画面で画像を挿入すると、デフォルトでは画像のサイズをStyle属性にて指定されます。

<img src="image/jpg" style="width:100px; height:100px;">

1	<img src="image/jpg" style="width:100px; height:100px;">

通常の使用では特に影響はありませんが、レスポンシブデザインの場合、画面サイズに合わせて画像が縮小表示するように、CSSで次のように記述することがあります。

img {
	max-width: 100%;
	height: auto;
}

img {

max-width: 100%;

height: auto;

}

ですがStyle属性でサイズを指定してある場合そちらの方が優先されますので、CSSの設定では期待通りに画像を表示することができません。

CKEditorで編集の際にStyle属性ではなく、従来のwidth、height属性で画像サイズを指定するには、CKEditorの「Enhanced Image」というプラグインをインストールすることで実現することができます。
このプラグインを有効にするためには、次の依存するプラグインも併せてインストールする必要があります。

「Dialog」「Clipboard」については標準で入っていますので、残りの2つを「ckeditor/plugins」ディレクトリに入れます。
その上で設定ファイル「ckeditor/config.js」内に次の一行を追加します。

config.extraPlugins = 'widget,lineutils,image2';

1	config.extraPlugins = 'widget,lineutils,image2';

DrupalでCKEditorを利用している場合、環境設定のCKEditorの設定にある「高度なオプション」に上記を記述することもできます。