Heim  >  Artikel  >  Web-Frontend  >  Wie filtert der Online-Texteditor Kindeditor HTML_javascript-Tipps?

Wie filtert der Online-Texteditor Kindeditor HTML_javascript-Tipps?

WBOY
WBOYOriginal
2016-05-16 15:05:401297Durchsuche

KindEditor ist ein visueller Open-Source-HTML-Editor, der hauptsächlich dazu verwendet wird, Benutzern das Erhalten von WYSIWYG-Bearbeitungseffekten auf Websites zu ermöglichen. Er ist mit gängigen Browsern wie IE, Firefox, Chrome, Safari und Opera kompatibel. KindEditor ist in JavaScript geschrieben und kann nahtlos in Java, .NET, PHP, ASP und andere Programme integriert werden. Dies ist die Einführung auf der offiziellen Website.

Homepage: http://www.kindsoft.net/index.php

Download: http://www.kindsoft.net/down.php

Beispiel: http://www.kindsoft.net/demo.php

Das Problem bei der Verwendung des Kindeditor-Texteditors besteht darin, dass der Kunde den Textinhalt direkt aus Excel in den Texteditor einfügt (können Sie fauler sein) und ihn dann direkt speichert, ohne den eingefügten Inhalt anzupassen (trauen Sie sich das zu)? Mach das? Sei faul! Bezüglich dieses sprachlosen Verhaltens konnte ich ihn nur anschreien, lass mich einen Etikettenfilter erstellen, damit du beim Einfügen keine Probleme hast (Feigling? Wer kann es sich leisten, Kunden zu beleidigen).

Die Filtermethode ist ebenfalls einfach:

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

Der Standardfiltermodus ist deaktiviert. Setzen Sie zuerst filterMode auf true und fügen Sie dann htmlTags hinzu, um die beizubehaltenden HTML-Tags und -Attribute anzugeben. Der Schlüssel des Hash-Arrays ist der HTML-Tag-Name, der Wert ist das HTML-Attribut-Array und die Attribute, die mit „.“ beginnen, stellen das Stilattribut dar. Datentyp: Objekt

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']
}
});
});

Oben zeigt Ihnen der Editor, wie Sie HTML im Online-Texteditor Kindeditor filtern.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn