Home  >  Article  >  Web Front-end  >  How does Kindeditor online text editor filter HTML_javascript tips

How does Kindeditor online text editor filter HTML_javascript tips

WBOY
WBOYOriginal
2016-05-16 15:05:401358browse

KindEditor is an open source HTML visual editor, mainly used to allow users to obtain WYSIWYG editing effects on websites. It is compatible with mainstream browsers such as IE, Firefox, Chrome, Safari, and Opera. KindEditor is written in JavaScript and can be seamlessly integrated with Java, .NET, PHP, ASP and other programs. This is the introduction on the official website.

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

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

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

The problem encountered when using the kindeditor text editor is that the customer directly pastes the text content from Excel into the text editor (can you be more lazy), and then saves it directly without adjusting the pasted content (do you dare to do that? Be lazy)! Regarding this speechless behavior, I could only yell at him, let me make a label filter so that you won't have any problems when pasting it (coward? Who can afford to offend customers).

The filtering method is also simple:

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

The default filterMode is off. First set filterMode to true, then add htmlTags to specify the HTML tags and attributes to be retained. The key of the hash array is the HTML tag name, the value is the HTML attribute array, and the attributes starting with "." represent the style attribute. Data type: 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']
}
});
});

The above is how the editor introduces to you how to filter HTML in the Kindeditor online text editor. I hope it will be helpful to you!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn