Extjs4本身的HtmlEditor编辑器,太鸡肋了,简单的html能够应付一下,稍加复杂的就无能为力了。
对于Extjs的HtmlEditor扩展主要有三个方向,一个是扩展其本身的htmlEditor,这个我在2.2的时候,扩展过几个功能,例如图片上传,附件添加等等,效果并不是特别理想http://hi.baidu.com/chinacloud/item/8c078fce9763027fced4f8d7
第二个方法一般初学者都会想到,用iframe内嵌一个编辑页面,这个方式我只想说:别糟蹋Extjs
第三个方法就是引用第三方的插件,要善于使用轮子,用轮子来造车,自然我选择第三种。
富文本框编辑器选择很多,但唯有KindEditor让我青睐已久,从最初的版本到现在的4.x,一直在用,小巧稳定,功能强大,配置简单等,除此之外可能百度的Editor也还不错,其他的就不敢说了。
下面开始整合Extjs4和Kindeditor,Extjs是一套非常优秀的RIA框架,能够非常方便的实现类的继承和扩展,我们新创建一个组建,继承textarea。
1 Ext.define('WMC.common.view.ExtKindEditor', { 2 extend: 'Ext.form.field.TextArea', 3 alias: 'widget.extkindeditor',//xtype名称 4 initComponent: function () { 5 this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "'></textarea>"; 6 this.callParent(arguments); 7 this.on("boxready", function (t) { 8 this.inputEL = Ext.get(this.getId() + "-input"); 9 this.editor = KindEditor.create('textarea[name="' + this.name + '"]', { 10 height: t.getHeight()-18,//有底边高度,需要减去 11 t.getWidth() - t.getLabelWidth(),//宽度需要减去label的宽度 12 basePath: '/Content/Plugin/kindeditor-4.1.5/', 13 uploadJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/upload_json.ashx',//路径自己改一下 14 fileManagerJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/file_manager_json.ashx',//路径自己改一下 15 resizeType: 0, 16 wellFormatMode: true, 17 newlineTag: 'br', 18 allowFileManager: true, 19 allowPreviewEmoticons: true, 20 allowImageUpload: true, 21 items: [ 22 'source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright', 23 'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|', 24 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'bold', 25 'italic', 'underline', 'lineheight', '|', 'image', 'multiimage', 26 'table', 'emoticons', 27 'link', 'unlink', 'fullscreen' 28 ] 29 }); 30 }); 31 this.on("resize", function (t, w, h) { 32 this.editor.resize(w - t.getLabelWidth(), h-18); 33 }); 34 }, 35 setValue: function (value) { 36 if (this.editor) { 37 this.editor.html(value); 38 } 39 }, 40 reset: function () { 41 if (this.editor) { 42 this.editor.html(''); 43 } 44 }, 45 setRawValue: function (value) { 46 if (this.editor) { 47 this.editor.text(value); 48 } 49 }, 50 getValue: function () { 51 if (this.editor) { 52 return this.editor.html(); 53 } else { 54 return '' 55 } 56 }, 57 getRawValue: function () { 58 if (this.editor) { 59 return this.editor.text(); 60 } else { 61 return '' 62 } 63 } 64 });
使用方法,和其他的field类似,如下:
//首先controller里要引用进来 Ext.define('WMC.controller.Main', { extend: 'Ext.app.Controller', ..... views: ['EditWin','WMC.common.view.ExtKindEditor'], ... //之后,在需要编辑的Window里,使用: { xtype: 'extkindeditor', allowBlank: false, name: 'Responsibilities', height: 140, 670, id: 'Responsibilities', fieldLabel: '岗位职责' }
然后界面就可以构造出来了
那么还剩一步,如何设置和获取extkindeditor的值呢?
//this.getSkills(),this.getResponsibilities()为refs中配置的get属性 //编辑 editRecord: function (view, record, item, index) { var win = this.getEditWin(); var form = win.down("form"); form.loadRecord(record); win.show(); //显示时候,将html的值显示到kindeditor中 this.getSkills().setValue(record.data.Skills); this.getResponsibilities().setValue(record.data.Responsibilities); }, //保存 saveRecord: function () { var win = this.getEditWin(); var form = win.down("form"); var model = form.getValues(); //这里是重点,不设置的话,默认是非html格式的 model.Skills = this.getSkills().getValue(); model.Responsibilities = this.getResponsibilities().getValue(); if (form.isValid()) { record = form.getRecord(); var store = this.getMainGrid().getStore(); if (record) {//如果是修改 record.set(model); } else { store.add(model); } win.close(); store.sync(); } },
OK,Enjoy It!
额。。。忘记了,不要忘记在页面head里加上引用:
<link href="~/Content/Plugin/kindeditor-4.1.5/themes/default/default.css" rel="stylesheet" /> <script src="~/Content/Plugin/kindeditor-4.1.5/kindeditor-all-min.js"></script> <script src="~/Content/Plugin/kindeditor-4.1.5/lang/zh_CN.js"></script>