首頁 > web前端 > js教程 > 主體

Kindeditor線上文字編輯器如何過濾HTML_javascript技巧

WBOY
發布: 2016-05-16 15:05:40
原創
1368 人瀏覽過

  KindEditor是一套開源的HTML視覺化編輯器,主要用於讓使用者在網站上獲得所見即所得編輯效果,相容於IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。 KindEditor使用JavaScript編寫,可無縫的程式與Java、.NET、PHP、ASP等程式接合。這個是官網上的介紹。

首頁:http://www.kindsoft.net/index.php

下載:http://www.kindsoft.net/down.php

範例:http://www.kindsoft.net/demo.php

使用kindeditor文字編輯器時遇到的問題,客戶直接從Excel裡貼上文字內容到文字編輯器中(能不能再懶一些),然後不調整貼上內容直接就保存(你敢不敢再懶一些)!對於這種很無語的行徑,我只能對他大吼一聲,我做一個標籤過濾吧,這樣你粘貼就不會出現問題了(慫?誰惹得起客戶)。

濾波法也簡單:

KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
filterMode: true,//是否开启过滤模式
});
}); 
登入後複製

預設filterMode是關閉狀態,先把filterMode設定為true,然後增加htmlTags,指定要保留的HTML標記和屬性。哈希數組的key為HTML標籤名,value為HTML屬性數組,"."開始的屬性表示style屬性。資料型態:Object

KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
filterMode: true,//是否开启过滤模式
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線上文字編輯器如何過濾HTML,希望對大家有幫助!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板