为什么kindeditor编译器会过滤css

html-css018

为什么kindeditor编译器会过滤css,第1张

首先我们知道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之后,编辑器里面添加的代码就都会被保留。

<input onkeyup="usrNameSet(this)" />

其它的自己可以随便调用

Js部分

//只能输入数字、字母、小数点、汉字、@

function usrNameSet(num){

var str=num.value

//var str = document.getElementById("userName").value

var value=str.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')

document.getElementById("userName").value=value

}

//手机号码、手机验证码,只能输入数字

function numberSet(num){

var str=num.value

var value=str.replace(/[^0-9]/g,'')

num.value=value

}

//推广码验证,只能输入数字跟字母

function spreadCodeSet(num){

var str=num.value

var value=str.replace(/[^\w\.\/]/g,'')

num.value=value

}

//密码设置 不能为空格

function passwordSet(num){

/*

var str=document.getElementById("password").value

var value=str.replace(/^ +| +$/g,'')

document.getElementById("password").value=value

*/

var str=num.value

var value=str.replace(/^ +| +$/g,'')

num.value=value

}

//登陆验证码

//只能是4位字母或数字

function UserVerifycodeSet(){

var str=document.getElementById("verifycode").value

var value=str.replace(/[^a-zA-Z0-9]/g,'')

document.getElementById("verifycode").value=value

}

//姓名和身份证认证

function nameNumberSet(num){

if(num.id=='text_name')//姓名 只能输入汉字

{

var str=num.value

var value=str.replace(/[^\u4E00-\u9FA5]/g,'')

num.value=value

}

else if(num.id=='text_idcard'){//身份证只能是数字和字母

var str=num.value

var value=str.replace(/[^a-zA-Z0-9]/g,'')

num.value=value

}

}

//邮箱输入 //只能输入数字、字母、小数点、汉字、@、-

function myMailSet(num){

var str=num.value

var value = str.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.\-\_]/g,'')

num.value=value

}

//充值输入设置,小数点后只能两位

function moneyInput(num){

//var str=num.value

//alert(str)

//var value=str.replace(function(){

//if(this.value==this.value2)returnif(this.value.search(/^\d*(?:\.\d{0,2})?$/)==-1)this.value=(this.value2)?this.value2:''else

this.value2=this.value

//})

//var value=str.toFixed(2)

// var value = str.replace(/[^a-zA-Z0-9]/g,'')

// num.value=value

if(num.value==num.value2)return

if(num.value.search(/^\d*(?:\.\d{0,2})?$/)==-1)

num.value=(num.value2)?num.value2:''

else num.value2=num.value

}

//地址输入设置

//只能输入数字、字母、

function addressSet(num){

var str=num.value

var value=str.replace(/[^\u4e00-\u9fa5\w]/g,'')

num.value=value

}

//银行卡输入设置

function formatBankNoSet(BankNo){

//alert(BankNo.value)

var str=BankNo.value

var value=str.replace(/[^0-9]/g,'')

BankNo.value=value

}

//只能输入字母、汉字

function cnOrEn(num){

var str=num.value

var value=str.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')

num.value=value

}

1、CSS Filter

使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。

现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。

添加如下CSS样式可以将图像变成灰色

代码如下:

img {

-webkit-filter: grayscale(1)/* Webkit */

filter:gray/* IE6-9 */

filter: grayscale(1)/* W3C */

}

支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)

(注意:这段代码在Firefox上无效果。)

2、Javascript

第二种方法是通过使用JavaScript技术上应该支持所有JavaScript的浏览器,包括IE6以下

代码来自Ajax Blender.

代码如下:

varimgObj = document.getElementById('js-image')

functiongray(imgObj) {

varcanvas = document.createElement('canvas')

varcanvasContext = canvas.getContext('2d')

varimgW = imgObj.width

varimgH = imgObj.height

canvas.width = imgW

canvas.height = imgH

canvasContext.drawImage(imgObj, 0, 0)

varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH)

for(vary = 0y <imgPixels.heighty++){

for(varx = 0x <imgPixels.widthx++){

vari = (y * 4) * imgPixels.width + x * 4

varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3

imgPixels.data[i] = avg

imgPixels.data[i + 1] = avg

imgPixels.data[i + 2] = avg

}

}

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height)

returncanvas.toDataURL()

}

imgObj.src = gray(imgObj)

3、SVG

第三种方法来自SVG Filter.,你需要创建一个SVG文件,并将以下代码写在里面,保存命名为***.svg

代码如下:

<svgxm .w3.org/2000/svg">

<filterid="grayscale">

<feColorMatrixtype="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

</filter>

</svg>

然后利用过滤器的属性,我们可以通过SVG文件中的元素的ID连接SVG文件

[code]

img {

filter:url('img/gray.svg#grayscale')

}