web-dev-qa-db-ja.com

ckeditorでアップロードした画像を拡大縮小する方法

CKEditorを使用していますが、編集中の画像のスケーリングに問題があります。アップロードしてエディターに挿入すると、画像が非常に大きい場合、そのようにエディターに表示され、ユーザーにとって非常に困難になります。

Class属性をCSSクラスに設定するこれらの画像スタイル用に定義されたフォーマットがあります。

エディターで画像をそのフォーマットのCSSに準拠させる方法はありますか？そのため、編集中のページレイアウトは、保存後のページレイアウトに似ていますか？

7mediawysiwyg
3
vintorg

Ckeditorライブラリの最新バージョンには、新しい拡張画像プラグインがあります。このプラグインを使用すると、画像のコーナーをドラッグしてインライン画像のサイズを変更できます。 ckeditor構築Webサイト（ http://ckeditor.com/builder ）に移動し、拡張イメージプラグイン（image2）を選択し、ビルドから標準イメージプラグインの選択を解除します。

4
peerv

これは、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を使用することで、同じレスポンシブスタイルをすべて模倣できます。

2
Dan H

Image Resize Filter は、インライン画像のサイズを変更するための最も簡単なエンドユーザーソリューションです。これをチェックしてください ビデオデモ

Image Resize Filter は、特にtinyMCEやCKeditorなどのWYSIWYGエディターと組み合わせると、画像のサイズを簡単に変更できます。ユーザーは画像サイズのスケーリングについて再び心配する必要はありません。画像を挿入し、HTMLに高さと幅のプロパティを設定するだけです（これはWYSIWYGエディターによって自動的に行われます）。画像は出力時にHTMLに合わせてサイズ変更されます。

特徴：

  • ローカルイメージと（オプションで）リモートイメージの両方を自動的にサイズ変更します。
  • オプションで、サイズを変更したインラインバージョンからフルサイズの画像へのリンクを作成します。
  • ローカルに保存することにより、他のサイトからの画像のインライン「ホットリンク」を防ぎます。
  • ユーザーが遅延して追加できない場合に、高さと幅の属性をインライン画像に追加します。

および

レスポンシブ画像の場合、 Adaptive Image Styles（ais） モジュールを使用します

WYSIWYGモジュールとの統合、画像ごとに適応する画像を選択する機能。

1
Bala