kindeditor編輯器代碼過濾解決方案

kindeditor編輯器代碼過濾解決方案. jiaoguoqiang 發佈於 2014-07-26 分類：JavaScript 閱讀(1134) 評論(0)

很多朋友在使用Kindeditor編輯器的時候都會遇到這樣一個問題，如：給A標籤加上title屬性過後，瀏覽的時候，卻神奇般地發現title屬性沒有了。再次切換html原始碼的時候，返現編輯器將title屬性給刪掉了。追究其根本原因主要是kindeditor設定了標籤和屬性的預設過濾機制。KindEditor預設狀態下會過濾編輯器裡的html代碼，主要是為了產生乾淨的代碼，就會出現我們想不到的結果，現在焦國強為大家講解：如何避免自己手動添加的代碼被不必要的過濾。
首先我們知道3.4版本以上版本預設開啟了過濾模式（filterMode:true）。當filterMode為true時，編輯器會根據htmlTags設定自動過濾HTML代碼。
可是在我們平時的使用中，為了精簡內容代碼和達到好特定的顯示效果，經常會用一些div跟css的代碼，如果不更改編輯器的設定，這些代碼都會被過濾，所以如果想保留所有HTML相關代碼，請將kindeditor.js裡的filterMode設定成false。如果想保留特定HTML，請將filterMode設定成true後，配置htmlTags屬性。

filterMode : true // true:開啟過濾模式, false:關閉過濾模式

如果改成filterMode : false之後，編輯器裡面添加的代碼就都會被保留。

可是如果我只是想不過濾某個標籤，其他的還是正常過濾，應該怎麼辦呢。比如說我想保留行距代碼<span style=”line-height:30px;”>,其他的還是正常過濾，方法是：
filterMode : 改成true 就是開啟過濾的意思。
然後我們可以通過設定其htmlTags屬性來得以實現。KindEditor 預設採用白名單過濾方式，可用 htmlTags 參數定義要保留的標籤和屬性 htmlTags指定要保留的HTML標記和屬性。Object的key為HTML標籤名，value為HTML 屬性數組，”.”開始的屬性工作表示style屬性。修改的檔案為kindeditor.js 例子如下所示：在span下面添加line-height屬性標籤就可以了，當然要按照格式來添加，格式可以參照其他已經有的標籤。

綜上所述，通過以上兩種方式即可實現kindeditor編輯器的標籤和屬性過濾效果。

不過修改完了一定要注意關掉編輯器的介面在重新開啟，或是重新整理，總之要清空緩衝，否則是不起作用的。

原文連結：http://www.jiaoguoqiang.com/554.html