Kindeditor在線文本編輯器如何過(guò)濾HTML
KindEditor是一套開(kāi)源的HTML可視化編輯器,主要用于讓用戶在網(wǎng)站上獲得所見(jiàn)即所得編輯效果,兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。 KindEditor使用JavaScript編寫(xiě),可以無(wú)縫的與Java、.NET、PHP、ASP等程序接合。這個(gè)是官網(wǎng)上的介紹。
主頁(yè):http://www.kindsoft.net/index.php
下載:http://www.kindsoft.net/down.php
示例:http://www.kindsoft.net/demo.php
在使用kindeditor文本編輯器時(shí)遇到的問(wèn)題,客戶直接從Excel里粘貼文本內(nèi)容到文本編輯器中(能不能再懶一些),然后不調(diào)整粘貼內(nèi)容直接就保存(你敢不敢再懶一些)!對(duì)于這種很無(wú)語(yǔ)的行徑,我只能對(duì)他大吼一聲,我做一個(gè)標(biāo)簽過(guò)濾吧,這樣你粘貼就不會(huì)出現(xiàn)問(wèn)題了(慫?誰(shuí)惹得起客戶)。
過(guò)濾方法也簡(jiǎn)單:
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
filterMode: true,//是否開(kāi)啟過(guò)濾模式
});
});
默認(rèn)filterMode是關(guān)閉狀態(tài),首先把filterMode設(shè)置為true,然后增加htmlTags,指定要保留的HTML標(biāo)記和屬性。哈希數(shù)組的key為HTML標(biāo)簽名,value為HTML屬性數(shù)組,"."開(kāi)始的屬性表示style屬性。數(shù)據(jù)類(lèi)型:Object
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
filterMode: true,//是否開(kāi)啟過(guò)濾模式
htmlTags : {
font : ['id', 'class', 'color', 'size', 'face', '.background-color'],
div : [
'id', 'class', 'align', '.border', '.margin', '.padding', '.text-align', '.color',
'.background-color', '.font-size', '.font-family', '.font-weight', '.background',
'.font-style', '.text-decoration', '.vertical-align', '.margin-left'
],
a : ['id', 'class', 'href', 'target', 'name'],
embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
img : ['id', 'class', 'src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
'id', 'class', 'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
],
pre : ['id', 'class'],
hr : ['id', 'class', '.page-break-after'],
'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : ['id', 'class'],
iframe : ['id', 'class', 'src', 'frameborder', 'width', 'height', '.width', '.height']
}
});
});
以上所述是小編給大家介紹的Kindeditor在線文本編輯器如何過(guò)濾HTML,希望對(duì)大家有所幫助!
相關(guān)文章
詳解簡(jiǎn)單易懂的 ES6 Iterators 指南和示例
這篇文章主要介紹了詳解簡(jiǎn)單易懂的 ES6 Iterators 指南和示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript DOM節(jié)點(diǎn)操作方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript DOM節(jié)點(diǎn)操作方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
完美解決spring websocket自動(dòng)斷開(kāi)連接再創(chuàng)建引發(fā)的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決spring websocket自動(dòng)斷開(kāi)連接再創(chuàng)建引發(fā)的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
JS實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼
這篇文章主要為大家介紹了如何使用JavaScript實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼下載到本地,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-04-04

