CKEditor刪除內嵌img樣式

我正在使用響應式圖像技術，將CSS的最大寬度設置爲100％。CKEditor刪除內嵌img樣式

這不適用於通過CKEditor添加的任何圖像，因爲添加了內聯樣式。

在CSS中，我添加了一個樣式來覆蓋寬度，它的工作原理是，但height：auto不是，所以圖像被拉伸。

我需要找到一種方法來阻止CKEditor首先添加內聯樣式。

我使用CKEditor的4.x的

謝謝

2013-08-02 ccdavies

自從4.1版本，CKEditor的提供所謂Content Transformations並且已經定義了其中的一些。如果您在config.allowedContent中限制您不希望在<img>樣式中使用width和height，則編輯器會自動將樣式轉換爲屬性。例如：

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" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>

成爲輸出：

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

，正如我猜，它徹底解決您的問題。

來源

2013-08-04 20:10:02 oleq

：

這是可以做到像這樣。我想做這種轉換，而不需要每個可能的標記和attr的怪物白名單，也就是說'allowedContent：true'，可能是這樣的： 'CKEDITOR.on（'instanceReady'，function（ev）{ev.editor .filter.addTransformations（[['img：sizeToAttribute']]）;}）;' 讓它始終將樣式轉換爲屬性，但這不起任何作用。 – Synchro

如果'config.enterMode'爲'ENTER_P'，編輯器將作爲必須標記添加FYI'p'。 – oleq

@Synchro是正確的，使用'allowedContent'要求你白名單中的每個標籤和屬性。我發佈了另一種更合適的解決方案。 –

更好的替代方案是使用disallowedContent（see docs），而不是allowedContent。

使用allowedContent要求您爲每個可能的標籤或屬性創建一個相當大的白名單;其中disallowedContent沒有;允許您將樣式設置爲忽略。至於我可以看到，它也應該剝奪你的`p`標籤，因爲它們不會被你的規則允許

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

來源

2015-02-04 02:14:38

這應該是公認的答案，因爲它完全消除了在彈出窗口中設置圖像尺寸的能力......這是您想要的響應。涼。 – dhaupin

這正是我搜索的，thx。 – mondjunge

它不在ckeditor 4.6中工作，這裏是config.js http://pastebin.com/Dre5DskU – Cody

CKEditor刪除內嵌img樣式

回答

相關問題