Ext4如何使用集成kindeditor
ext如何使用kindeditor编辑器，将kindeditor集成到ext框架里面。
将kindeditor集成到ext框架里面效果如下
Ext4如何使用集成kindeditor源代码代码如下，测试ext版本为4.1，其他版本未测试，4.xx版本应该没有问题，ext3-和ext5+由于改动过，特别是ext3和ext4+相差比较大，所以ext3无法运行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4.2如何使用集成kindeditor</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script charset="utf-8" src="kindeditor-min.js"></script>
<script charset="utf-8" src="lang/zh_CN.js"></script>
<script type="text/javascript">
Ext.define('WMC.common.view.ExtKindEditor', {
extend: 'Ext.form.field.TextArea',
alias: 'widget.extkindeditor',//xtype名称
initComponent: function () {
this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "' style='width:100%'></textarea>";
this.callParent(arguments);
this.on("boxready", function (t) {
this.inputEL = Ext.get(this.getId() + "-input");
this.editor = KindEditor.create('textarea[name="' + this.name + '"]', {
height: t.getHeight() - 18,
width: t.getWidth() ,
basePath: '',//注意修改kindeditorbase路径
uploadJson: 'upload_json.jsp',//kindeditor上传文件处理文件路径，注意修改
fileManagerJson: 'file_manager_json.jsp',//kindeditor文件管理文件路径，注意修改
resizeType: 0,
wellFormatMode: true,
newlineTag: 'br',
allowFileManager: true,
allowPreviewEmoticons: true,
allowImageUpload: true,
items: [
'source', '|', 'justifyleft', 'justifycenter', 'justifyright',
'insertorderedlist', 'insertunorderedlist', '|',
'formatblock', 'fontname', 'fontsize', '|', 'hilitecolor', 'forecolor', 'bold',
'italic', 'underline', '|', 'image',
'table', 'link', 'unlink', 'fullscreen'
]
});
});
},
setValue: function (value) {
if (this.editor) {
this.editor.html(value);
}
},
reset: function () {
if (this.editor) {
this.editor.html('');
}
},
setRawValue: function (value) {
if (this.editor) {
this.editor.text(value);
}
},
getValue: function () {
if (this.editor) {
return this.editor.html();
} else {
return ''
}
},
getRawValue: function () {
if (this.editor) {
return this.editor.text();
} else {
return ''
}
}
});
Ext.onReady(function () {
pl = Ext.create('Ext.form.Panel', {
frame: true,
title:'ext如何使用kindeditor',
renderTo: document.body, items: [{
xtype: 'extkindeditor',
allowBlank: false,
name: 'info',
height: 280,
flex: 1,
id: 'Responsibilities',
fieldLabel: '内容描述'
}
], buttons: [{
text: 'Save', handler: function () {
console.log(pl.getForm().getFieldValues())
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
点击保存按钮获取表单数据如下图所示
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext4如何使用集成kindeditor