1. 程式人生 > >kindeditor編輯器程式碼過濾解決方法分享

kindeditor編輯器程式碼過濾解決方法分享

很多朋友在使用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編輯器的標籤和屬性過濾效果。不過修改完了一定要注意關掉編輯器的介面在重新開啟,或是重新整理,總之要清空快取,否則是不起作用的