Extjs4.2x integration with Rich Text Box editor KindEditor

Next we will integrate Extjs4 and Kindeditor. Extjs is a set of excellent RIA frameworks that can easily implement class inheritance and extension. We will create a new component to inherit textarea. Copy code 1 Ext. define ('wmc. common. view. extKindEditor ', {2 extend: 'ext. form. field. textArea ', 3 alias: 'widget. extkindeditor ', // xtype name 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, // The bottom side height, minus 11 width: t. getWidth ()-t. getLabelWidth (), // The width needs to be subtracted from the label width 12 basePath: '/Content/Plugin/kindeditor-4.1.5/', 13 uploadJson: '/Content/Plugin/kindeditor-4.1.5/ fileManagerJson: '/Content/Plugin/kindeditor-4.1.5/ resizeType: 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}); copy the code usage, similar to other fields, as follows: copy the code // first, Ext must be referenced in the controller. define ('wmc. controller. main ', {extend: 'ext. app. controller ',..... views: ['editwin', 'wmc. common. view. extKindEditor '],... // then, in the Window to be edited, use: {xtype: 'extkindeditor ', allowBlank: false, name: 'responsibilities', height: 140, width: 670, id: 'responsibilities ', fieldLabel: 'job response '}