web-dev-qa-db-ja.com

CKEDITOR-画像の寸法をCSSスタイルとして追加しないようにする

CKEDITORが画像の寸法をスタイルとして追加しないようにするにはどうすればよいですか？

これの代わりに：

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

これ欲しい

<img src="image.jpg" height="100px" width="100px">
cssimageckeditor
38
Franek

CKEditor 4.4.0で導入された Disallowed Content を使用して、これを行う（はるかに簡単な）もう1つの方法があります。

CKEDITOR.replace( 'editor1', {
    disallowedContent : 'img{width,height}'
} );

またはconfig.js：

config.disallowedContent = 'img{width,height}';

このルールは、img要素のインラインスタイル（幅と高さ）を許可しません。代わりに、CKEditorが属性を使用します。

なんらかの理由で、イメージダイアログウィンドウの幅/高さの入力要素がなくなっていることに気づいた場合は、次の項目も設定してください。

config.extraAllowedContent = 'img[width,height]';
33
Wiktor Walc

このコードは、CKEditorのconfig.jsに挿入することで解決できます。

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                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];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});
33
Marco Cortellino

ねえ、私はそれを理解しました！だから私はあなたのためにこれを投稿するためだけにここにアカウントを作成しました。私はそれをOutlookニュースレターに使用していませんが、imgタグに高さと幅の属性を追加するため、引き続き機能します。

私たちがこれをもう一度やりたくなった場合、ここがまさに私のやり方です。

最初に、完全にフォーマットされコメント化されたソースファイルをいくつか見つけました。

http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js

だから私はplugins/image/dialogs/image.jsのソースを取得しました：

svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs

ダウンロードせずにコピーしただけで各行に行番号がある場合は、（Linux端末から）次のコマンドを実行して削除できます。

cut -c 5- image.js > image2.js

または、ページ下部の上の最初のリンクにある[元の形式]リンクをクリックします。

これで、編集可能なクリーンなソースファイルが完成しました。

元のパックバージョンは、19kでした。解凍されたソースコードは45kでした。しかし、それは誰かがとにかく何かを編集しているときにのみ読み込まれるべきであり、問​​題にはなりません。場合は、それを再梱包してください。

私が持っているバージョンはあなたが持っているものとは異なるかもしれないので、どの行を変更しているか、次に何をしたかを示します。

636-641行目を置き換えます。

if ( value )
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'width' );

!internalCommit && element.removeAttribute( 'width' );

と：

if ( value ) {
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'width', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'width' );
    element.removeAttribute( 'width' );
}

//!internalCommit && element.removeAttribute( 'width' );

行653を置き換えます（上記の編集後の657）：

element.setStyle( 'width', value + 'px');

と：

element.setStyle( 'width', value + 'px');
element.setAttribute( 'width', value );

行686-692を置き換えます（上記の編集後の691-697）：

if ( value )
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'height' );

if ( !internalCommit && type == IMAGE )
    element.removeAttribute( 'height' );

と：

if ( value ) {
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'height', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'height' );
    element.removeAttribute( 'height' );
}

//if ( !internalCommit && type == IMAGE )
//  element.removeAttribute( 'height' );

704行目（上記の編集後の712）を置き換えます。

element.setStyle( 'height', value + 'px' );

と：

element.setStyle( 'height', value + 'px' );
element.setAttribute( 'height', value );

唯一の問題は、コントロールポイントをドラッグしてサイズを変更しても機能しないことです。その部分が分かりませんでした。コントロールポイントをドラッグしてサイズを変更したら、画像のプロパティを開いて[OK]をクリックすると、幅と高さの属性が再び追加されます。

4
rykr

CKEDITORの画像プラグインファイルを変更せずにそれができるとは思いません。

彼らのバグ追跡サイトを検索すると、彼らはスタイリングを優先して「XHTMLの非推奨属性を避けようとしている」ことがわかります。 （ 非推奨の画像属性を避ける ）

（ソースファイルを変更して）自分で実行する場合に確認する場所は、次のファイルです： plugins_image_dialogs_image.js そこにそれらが表示されます特に属性を削除し、同等のスタイルを追加します。

3
Gabriele Petrioli

Cedric Dugasのソリューションと同様に、ここにCKEditorのチケットへのパッチがあり、この問題の解決に大きく役立ちました。

http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch

私はそれを使用しましたが、コードだけを少しトリミングして、画像だけがフィルターによって処理されるようにしました。このソリューションは、画像が挿入されたときだけでなく、エディターのハンドルでサイズが変更されたときにも機能します。

それが役に立てば幸い

1
MaxiWheat

フォームを保存するときに、これを行います

var CKEDITOR   = window.parent.CKEDITOR;   
        for ( var i in CKEDITOR.instances ){
           var currentInstance = i;
           break;
        }
        var oEditor = CKEDITOR.instances[currentInstance];
        oEditor.dataProcessor.htmlFilter.addRules({
            elements :{
                img : function( element ){
                    if(!element.attributes.width){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findwidth = new RegExp("\[width: \]\s*(((?!\[width: \]|\[px\]).)+)\s*\[px\]")
                            var sWidth = findwidth.exec(styling)
                            sWidth = sWidth[1]
                            if(sWidth) element.attributes.width = sWidth;
                        }
                        // var reg=/width: \s*([0-9]+)\s*px/i;
                        // var res=styling.match(reg);


                    }
                   if(!element.attributes.height){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findheight = new RegExp("\[height: \]\s*(((?!\[height: \]|\[px\]).)+)\s*\[px\]")
                            var sHeight = findheight.exec(styling)
                            sHeight = sHeight[1]
                            if(sHeight) element.attributes.width = sHeight;
                        }
                    }

                }

    }
1
Cedric Dugas