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