3

私は自分のウェブサイトのリッチテキストエディターとしてCKEditorを使用しています。そのサイトには、「filebrowserImageBrowseUrl」構成パラメーターを使用してCKEditorで使用するカスタムイメージマネージャーもあります。これにより、画像のプロパティに[サーバーの参照]ボタンが表示され、画像マネージャーからファイルを選択できるようになります。これは問題なく機能します。

ただし、画像マネージャーから画像を挿入してCKEditorでサイズを変更すると、imgタグにスタイル属性のみが追加されます。私のウェブサイトを閲覧すると、私が望むサイズの画像が表示されますが、画像のサイズがサムネイルだけであっても、大量のデータをダウンロードする必要があります。

画像のURLにクエリ文字列として幅と高さを入力すると、画像マネージャーの自動サイズ変更が行われます。

CKEditorが作成するimgタグをオーバーライドして、選択した幅と高さをクエリ変数として、スタイル属性に加えてimgタグのsrc属性に配置するにはどうすればよいですか（CKEditorが画像のサイズを認識できるようにするため）。

ここに投稿された別の質問を見つけました：CKEditor：画像の挿入に関するカスタマイズされたHTML しかし、その例の幅と高さにはカスタムサイズではなく画像の元のサイズが含まれているため、その質問の答えは機能しないようです。また、カスタムサイズを見つけることなく、これらのメソッドからさまざまな変数をデバッグしました。

したがって、疑問が残ります。CKEditorの出力HTMLをオーバーライドして、画像のサイズをクエリ変数として、またCKEditorがデフォルトで配置するスタイル属性に配置するにはどうすればよいですか？

アップデート

以下のすべてのコメントをもう少し包括的にするために、ここに要約バージョンがあります：

CKEDITOR.on('instanceReady', function (ev) {
    var editor = ev.editor,
        dataProcessor = editor.dataProcessor,
        htmlFilter = dataProcessor && dataProcessor.htmlFilter;

    htmlFilter.addRules( {
        elements : {
            $ : function( element ) {
                // Output dimensions of images as width and height attributes on src
                if ( element.name == 'img' ) {
                    var style = element.attributes.style;
                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                        var height = match && match[1];

                        var imgsrc = element.attributes.src + "?width=" + width + "&height=" + height;

                        element.attributes.src = imgsrc;
                        element.attributes['data-cke-saved-src'] = imgsrc;
                    }
                }
            }
        }
    });
});

このコードは、CKEditorが実際のHTMLを生成するたびに実行されます。これは、[ソース]ボタンをクリックするか、そのページのHTTP POSTを実行して、ソースを表示したときに発生します。

ただし、小さな警告です。上記のコードは、[ソース]ボタンをクリックするたび、またはポストバックごとに幅と高さのクエリ文字列を追加し続けるため、追加する前に幅と高さのクエリ文字列を除外するロジックを追加することをお勧めします。 src属性。

4

1 に答える 1

2

CKEditorのコピーにある出力HTMLサンプルを見ると、htmlFilterを使用して画像を変更し、属性に寸法を配置する方法がわかります。そのコードに基づいて、画像のURLを変更するように独自のコードを作成できます。

また、注意してください。URLはブラウザの問題を回避するために保護されているため、「src」属性を変更するだけでは不十分な場合があります。変更するオブジェクトのプロパティを確認します。

于 2012-06-03T18:00:37.240 に答える