CKEditor4 自動清除內容標籤
在CKEditor中我們經由配置檔Config.js,可以依照自己的需求去自定編輯器的工具
如下圖的每一個小方塊,可依需求增加減少:
但在 CKEditor 中 CKEDITOR.editor.filter 會過濾掉一些沒開放功能的內容或程式碼
舉例來說:
上面這編輯器並沒有開放 iframe 這功能,但倘若我想要貼上 youtube 分享的嵌入HTML碼,而 youtube 的 HTML 就是由 <iframe> 方式嵌入的,youtube嵌入的Code如下:
<iframe width="560" height="315" src="//www.youtube.com/embed/9ATcxIOeDiY" frameborder="0" allowfullscreen></iframe>
我們開啟原始碼的編輯模式,貼上這一段code,做嵌入影片的動作後,在切換回所見即所得編輯方式的同時CKEDITOR.editor.filter就會過濾掉一些沒開放功能的內容,如上圖沒開放的iframe工具,如此我們因為沒有開放iframe工具就沒有辦法貼入youtube的iframe嵌入碼,其實這很合理,某些時候是一種很棒的限制內容功能,不過有些時候這或許並不是我們想要的,我們可能希望可以在不提供iframe的工具下,僅能用原始碼貼上的方式貼入 youtube 的 iframe。
解決這問題 CKEditor 也提供了2個解決方法:
在 CKEditor 配置檔 Config.js 設定
方法一:
config.allowedContent=true;
把allowedContent設定為true就是吧CKEDITOR.editor.filter這功能關閉,不去過濾任何內容,這方式不只針對 iframe,而是所有不開放功能都不會再被過濾了,雖然很方便,但少了一層的限制或許會擔心安全性的問題,所以我們還有第二種方法可選擇。
方法二:
CKEDITOR.editor.filter仍然運作,但允許開放部份不支援功能
config.allowedContent=false; config.extraAllowedContent='iframe';
便只允許iframe的操作,若允許的工具有多項就用空格分隔,如下
config.extraAllowedContent='b i iframe';