CKEDITOR が画像のサイズをスタイルとして追加しないようにするにはどうすればよいですか?
これの代わりに：
<img src="image.jpg" style="height:100px; width:100px;">
これ欲しい
<img src="image.jpg" height="100px" width="100px">
25610 次
7 に答える
33
CKEditor 4.4.0 で導入された許可されていないコンテンツを使用することで、これを行う (より簡単な) もう 1 つの方法があります。
CKEDITOR.replace( 'editor1', {
disallowedContent : 'img{width,height}'
} );
またはconfig.jsで：
config.disallowedContent = 'img{width,height}';
このルールは img 要素のインライン スタイル (幅と高さ) を禁止し、CKEditor は代わりに属性を使用します。
何らかの理由で、[画像] ダイアログ ウィンドウの幅/高さの入力要素がなくなっていることに気付いた場合は、次のようにも設定します。
config.extraAllowedContent = 'img[width,height]';
于 2014-06-26T07:45:51.507 に答える
33
このコードを 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;
}
}
});
});
于 2011-05-19T09:59:18.507 に答える
4
ねえ、私はそれを理解しました！だから私はあなた方全員のためにこれを投稿するためだけにここにアカウントを作成しました。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
または、ページの下部にある上の1番目のリンクにある[元の形式]リンクをクリックするだけです。
これで、クリーンなソースファイルを編集する準備が整いました。
元のパックバージョンは、私が持っていたものでは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]をクリックすると、幅と高さの属性が再度追加されます。
于 2010-04-09T06:58:29.287 に答える
3
CKEDITORの画像プラグインファイルを変更せずにそれができるとは思いません..
バグ追跡サイトを検索すると、スタイリングを優先して「XHTML の非推奨属性を回避」しようとしていることがわかります。(非推奨の画像属性は避けてください)
(ソース ファイルを変更して) 自分でやりたい場合は、次のファイルを参照してください。 plugins_image_dialogs_image.js そこには、特に属性が削除され、同等のスタイルが追加されていることがわかります。
于 2010-01-12T21:05:29.543 に答える
1
Cedric Dugas のソリューションと同様に、この問題を解決するのに大いに役立った CKEditor のチケットへのパッチがここにあります。
http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch
私はそれを使用しましたが、フィルターによって画像のみが処理されるように、コードを少しトリミングしました。このソリューションは、画像が挿入されたときだけでなく、エディターでハンドルを使用してサイズ変更されたときにも機能します。
それが役に立てば幸い
于 2011-05-04T14:59:08.100 に答える
1
フォームを保存するときは、これを行います
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;
}
}
}
}
于 2010-11-01T14:32:07.400 に答える
-2
ckeditor バージョン 4.1 の場合、以下を使用できます。
CKEDITOR.replace(textareaId,{
allowedContent: true,
});
すべての html 検証を削除するように見えるので、これには注意してください。
于 2013-04-09T22:24:47.720 に答える