ux.form.field.KindEditor 所见所得编辑器

Posted 2020-07-26 魔狼再世

注意需要引入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 });