效果:
直接上代码,例子中extjs是使用的在线的,需要引入kindeditor即可运行:
-
<html>
-
<head>
-
<title>Account Manager</title>
-
<meta charset="utf-8" />
-
<link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
-
<link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />
-
<script charset="utf-8" src="../kindeditor/kindeditor.js"></script>
-
<script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>
-
<script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
-
-
<link rel="stylesheet" type="text/css"
-
href="">
-
-
<script type="text/javascript"
-
src=""></script>
-
<script type="text/javascript"
-
src=""></script>
-
-
-
<script type="text/javascript">
-
Ext.require([ 'Ext.form.*', 'Ext.tip.*' ]);
-
-
Ext
-
.onReady(function() {
-
-
Ext
-
.apply(
-
Ext.form.field.VTypes,
-
{
-
password : function(val, field) {
-
if (/^[a-z0-9]+$/i.test(val)) {
-
return true;
-
}
-
},
-
passwordText : 'Password may only contain letters and numbers.'
-
});
-
-
Ext.QuickTips.init();
-
-
function submitOnEnter(field, event) {
-
if (event.getKey() == event.ENTER) {
-
var form = field.up('form').getForm();
-
form.submit();
-
}
-
}
-
-
function password(length, special) {
-
var iteration = 0;
-
var password = '';
-
var randomNumber;
-
-
if (special == undefined) {
-
var special = false;
-
}
-
-
while (iteration < length) {
-
randomNumber = (Math.floor((Math.random() * 100)) % 94) + 33;
-
if (!special) {
-
if ((randomNumber >= 33) && (randomNumber <= 47)) {
-
continue;
-
}
-
if ((randomNumber >= 58) && (randomNumber <= 64)) {
-
continue;
-
}
-
if ((randomNumber >= 91) && (randomNumber <= 96)) {
-
continue;
-
}
-
if ((randomNumber >= 123) && (randomNumber <= 126)) {
-
continue;
-
}
-
}
-
iteration++;
-
password += String.fromCharCode(randomNumber);
-
}
-
return password;
-
}
-
-
/**
-
* 信息内容
-
*/
-
var content = new Ext.form.TextArea(
-
{
-
fieldLabel : '信息内容',
-
maxLength : '1000',
-
height : 150,
-
maxLengthText : '文章提示信息长度不能超过2000字',
-
name : 'content',
-
id : 'content',
-
emptyText : '无',
-
anchor : '80%',
-
listeners : {
-
"render" : function(f) {
-
K = KindEditor;
-
htmlEditor = K
-
.create(
-
'#content',
-
{
-
uploadJson : '../kindeditor/jsp/upload_json.jsp',//路径自己改一下
-
fileManagerJson : '../kindeditor/jsp/file_manager_json.jsp',//路径自己改一下
-
height : 200,
-
width : '90%',
-
// fontSizeTable:['21px','20px','17px','18px','16px','14px','12px'],
-
resizeType : 1,
-
allowPreviewEmoticons : true,
-
allowImageUpload : true
-
});
-
}
-
}
-
});
-
-
// Form
-
// -----------------------------------------------------------------------
-
var addUserForm = Ext.create('Ext.form.Panel', {
-
renderTo : Ext.getBody(),
-
bodyStyle : 'padding: 5px 5px 0 5px;',
-
defaults : {
-
xtype : 'textfield',
-
anchor : '100%',
-
},
-
items : [ {
-
fieldLabel : 'Email',
-
name : 'email',
-
vtype : 'email',
-
maxLength : 64,
-
allowBlank : false,
-
listeners : {
-
specialkey : submitOnEnter
-
}
-
}, {
-
xtype : 'fieldcontainer',
-
fieldLabel : 'Password',
-
layout : 'hbox',
-
items : [ {
-
xtype : 'textfield',
-
name : 'password',
-
flex : 1,
-
vtype : 'password',
-
minLength : 4,
-
maxLength : 32,
-
allowBlank : false,
-
listeners : {
-
specialkey : submitOnEnter
-
}
-
}, {
-
xtype : 'button',
-
text : 'Random',
-
tooltip : 'Generate a random password',
-
style : 'margin-left: 4px;',
-
flex : 0,
-
handler : function() {
-
this.prev().setValue(password(8, false));
-
this.prev().focus()
-
}
-
} ]
-
}, content ],
-
buttons : [ {
-
id : 'saveBtn',
-
itemId : 'saveBtn',
-
text : 'Submit',
-
handler : function() {
-
this.up('form').getForm().submit();
-
}
-
}, {
-
text : 'Cancel',
-
handler : function() {
-
this.up('form').getForm().reset();
-
}
-
} ],
-
submit : function() {
-
var currentForm = this.owner.form;
-
-
if (currentForm.isValid()) {
-
// var newSomething = Ext.create('Something', currentForm.getFieldValues());
-
}
-
}
-
});
-
});
-
</script>
-
</head>
-
<body></body>
-
</html>
阅读(4745) | 评论(0) | 转发(0) |