CKEditorを使用していますが、編集中の画像のスケーリングに問題があります。アップロードしてエディターに挿入すると、画像が非常に大きい場合、そのようにエディターに表示され、ユーザーにとって非常に困難になります。
Class属性をCSSクラスに設定するこれらの画像スタイル用に定義されたフォーマットがあります。
エディターで画像をそのフォーマットのCSSに準拠させる方法はありますか?そのため、編集中のページレイアウトは、保存後のページレイアウトに似ていますか?
Ckeditorライブラリの最新バージョンには、新しい拡張画像プラグインがあります。このプラグインを使用すると、画像のコーナーをドラッグしてインライン画像のサイズを変更できます。 ckeditor構築Webサイト( http://ckeditor.com/builder )に移動し、拡張イメージプラグイン(image2)を選択し、ビルドから標準イメージプラグインの選択を解除します。
これは、CKEDITORのカスタムCSSファイルを作成することで解決できます。
テーマフォルダーなど、保存する場所にカスタムCSSファイルをアップロードします。
レンダリングされたページに使用される画像クラスまたはデータ属性のカスタムCSSファイル定義に追加します。
例:/sites/all/themes/THEMENAME/css/editor.css
img.class-small {
width: 100px;
height: auto;
}
[data-picture-align="right"] {
float: right;
}
[data-picture-group="medium"] {
max-width: 310px;
height: auto;
}
Admin/config/content/ckeditorに移動し、関連するプロファイルを編集します。
CSS領域を開いて[CSSの定義]を選択し、作成したCSSファイルへのパスを入力します。例えば。 「/sites/all/themes/THEMENAME/css/editor.css」
これで、エディター自体にいるとき、エディターはそのカスタムCSSファイルを参照し、指定したとおりに画像を描画します。サイトで使用するのと同じようにエディターにレスポンシブCSSを使用することで、同じレスポンシブスタイルをすべて模倣できます。
Image Resize Filter は、インライン画像のサイズを変更するための最も簡単なエンドユーザーソリューションです。これをチェックしてください ビデオデモ
Image Resize Filter は、特にtinyMCEやCKeditorなどのWYSIWYGエディターと組み合わせると、画像のサイズを簡単に変更できます。ユーザーは画像サイズのスケーリングについて再び心配する必要はありません。画像を挿入し、HTMLに高さと幅のプロパティを設定するだけです(これはWYSIWYGエディターによって自動的に行われます)。画像は出力時にHTMLに合わせてサイズ変更されます。
特徴:
および
レスポンシブ画像の場合、 Adaptive Image Styles(ais) モジュールを使用します
WYSIWYGモジュールとの統合、画像ごとに適応する画像を選択する機能。