7

以下を使用して TinyMCE エディターに画像を追加しています。

var params = {
             src: filename,
             title: "Attached image: " + filename,
             width: 500
             };

ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));

これにより、画像がエディターに正しく挿入されます。ただし、ユーザーが画像をクリックすると、サイズを変更できます。

次の方法があるかどうか知りたいです。

  1. ユーザーが一方向にのみサイズ変更できないようにします (つまり、画像の固定縦横比を維持するにはどうすればよいですか)
  2. ユーザーによる画像のサイズ変更を完全に防止する
4

3 に答える 3

11

（部分的な）答えを見つけたので、ここで共有すると思いました。

追加する

'object_resizing' : false

エディターの構成では、サイズ変更を防ぎます。これは Mozilla のみの機能であることに注意してください (たとえば、Google Chrome では画像のサイズを変更できません)。

私はまだ にとどまる方法を探していますaspect ratioがreal time、それが本当に可能かどうかはわかりません.

于 2012-08-18T09:16:44.957 に答える
4

この小さなプラグインをtinyMCEに追加するだけで、私はそれを使用しましたが、非常にうまく機能します。ドキュメントは次のとおりです。リンク

于 2012-08-23T19:41:39.870 に答える
3

サイズ変更ハンドラー ( jQuery ハンドラーなど) を実装する必要があります。画像に属性を追加して寸法を保存したり、縦横比を保持する単一の設定を使用したりすると便利な場合があります。このためには、tinymce 構成設定の valid_elements を調整して、画像のこれらの属性を許可します。

サイズ変更が発生すると、新しい寸法を取得し、縦横比に従って寸法を調整します - 新しい幅または新しい高さを使用して調整します (他の値は修正する必要があります)。

例:画像には、縦横比を保持する属性縦横比があります

このコードは、tinymceセットアップ構成パラメーターに配置できます。

   setup : function(ed) {
      ed.onInit.add(function(ed) {
        $(ed.getBody()).find('img').resize( function(event){

          $(event.target).css('width', parseInt ( event.target.width * this.aspectratio)  );

        });
      });
   }

アップデート：

IE で使用する例を示すために、tinymce フィドルを作成しました。

于 2012-08-20T10:21:37.660 に答える