标签:
注意需要引入KindEditor相关资源
1 //所见所得编辑器 2 Ext.define(‘ux.form.field.KindEditor‘, { 3 extend: ‘Ext.form.field.TextArea‘, 4 alias: ‘widget.kindEditor‘, 5 xtype: ‘kindEditor‘, 6 //最大文本长度 7 maxLength:5000, 8 //配置 9 editorConfig: { 10 //选项功能 11 items: [ 12 ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘cut‘, ‘copy‘, ‘paste‘, ‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘, ‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘, ‘/‘, 13 14 ‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘, ‘image‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘pagebreak‘, ‘anchor‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘ 15 ], 16 minHeight: 200 17 }, 18 afterRender: function () { 19 var me = this; 20 me.callParent(arguments); 21 //延迟输入验证 22 me.task = Ext.create(‘Ext.util.DelayedTask‘, 23 function (t) { 24 me.isValid(); 25 }, 26 me); 27 if (!me.editor) { 28 //创建富文本插件 29 me.editor = KindEditor.create("#" + me.getInputId(), Ext.apply(me.editorConfig, { 30 //编辑器创建成功 31 afterCreate: function () { 32 //标识完成 33 me.KindEditorIsReady = true; 34 }, 35 //内容发生改变时 36 afterChange: function () { 37 //编辑器初始化完成才执行 38 if (me.KindEditorIsReady) { 39 //延迟输入验证 40 me.task.delay(100); 41 } 42 }, 43 //失去焦点 44 afterBlur: function () { 45 //输入验证 46 me.isValid(); 47 } 48 })); 49 } else { 50 me.editor.html(me.getValue()); 51 } 52 }, 53 setValue: function (value) { 54 //console.log(‘setValue‘); 55 var me = this; 56 if (!me.editor) { 57 me.setRawValue(me.valueToRaw(value)); 58 } else { 59 if(value){ 60 me.editor.html(value.toString()); 61 }else{ 62 63 } 64 } 65 me.callParent(arguments); 66 return me.mixins.field.setValue.call(me, value); 67 }, 68 getRawValue: function () { 69 //console.log(‘getRawValue‘); 70 var me = this; 71 if (me.KindEditorIsReady) { 72 //自动同步值 73 me.editor.sync(); 74 } 75 v = me.inputEl ? me.inputEl.getValue() : ‘‘; 76 me.rawValue = v; 77 return v; 78 }, 79 //重置 80 reset: function () { 81 if (this.editor) { 82 this.editor.html(‘‘); 83 } 84 this.callParent(); 85 }, 86 //销毁富文本控件 87 destroyEditor: function () { 88 var me = this; 89 if (me.rendered) { 90 try { 91 me.editor.remove(); 92 me.editor = null; 93 } catch (e) { } 94 } 95 }, 96 //销毁 97 onDestroy: function () { 98 var me = this; 99 me.destroyEditor(); 100 me.callParent(arguments); 101 } 102 });
ux.form.field.KindEditor 所见所得编辑器
标签:
原文地址:http://www.cnblogs.com/mlzs/p/5595802.html