CKEditor 인라인 img 스타일 제거

Question

CSS로 최대 너비 100 %로 설정하는 반응 형 이미지 기술을 사용하고 있습니다.

인라인 스타일이 추가되어 CKEditor를 통해 추가 된 이미지에는 작동하지 않습니다.

CSS에서는 너비를 재정의하는 스타일을 추가했지만 높이는 자동으로 적용되지 않으므로 이미지가 늘어납니다.

CKEditor가 처음부터 인라인 스타일을 추가하는 것을 막을 수있는 방법을 찾아야합니다. 내가

CKEditor 4.x의

을 사용하고

는

Answer 1

버전 4.1 이후, CKEditor 그렇게 Content Transformations라고 이미 그 중 일부를 정의하고 제공 감사드립니다. config.allowedContent에서 width 및 height을 <img> 스타일에 포함하지 않으려면 편집기가 자동으로 스타일을 속성으로 변환합니다.

CKEDITOR.replace('editor1', { 
    allowedContent: 
     'img[!src,alt,width,height]{float};' + // Note no {width,height} 
     'h1 h2 div' 
}); 

다음 : 예를 들어 내가 추측으로, 완전히 문제를 해결,

<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p> 

과 :

<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p> 

는 출력이됩니다.

Answer 2

allowedContent과 반대로 허용되는 대답보다 훨씬 더 나은 대안은 disallowedContent (see docs)입니다.

allowedContent을 사용하면 가능한 모든 태그 또는 속성에 대해 다소 큰 흰색 목록을 만들어야합니다. 어디로 disallowedContent 않습니다; 무시할 스타일을 지정할 수 있습니다.

이

은과 같이 수행 할 수 있습니다

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