Extjs6.2 中使用 UEditor

定义EXTJS组件(UEditor.js)

/**
 * ExtJS6整合UEditor, 在extjs引入之前必须导入以下三个js文件
 * <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
 * <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
 * <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
 */
Ext.define('concert.ux.UEditor', {
    extend: 'Ext.form.field.Base',
    alias:'widget.ueditor',
    ueditor:null,
    ueditorConfig: {},
    anchor: '100%',
    config:{
    },
    initComponent:function(){
        var me = this;
        Ext.apply(this,{
            //fieldSubTpl:'<div id="'+me.id+'ueditor" name="'+me.name+'" ></div>',
            fieldSubTpl: '<script id="'+me.id+'ueditor" type="text/plain" name="' + me.name + '"></script>',
            items:[
                {
                    xtype: 'hiddenfield',
                    name: me.name
                }
            ],
            listeners:{
                scope:me,
                render:function(){
                    var config = {initialFrameWidth: (me.width || '100%'),initialFrameHeight:me.height};
                    Object.assign(me.ueditorConfig,config);
                    me.ueditor = UE.getEditor(me.id+'ueditor',config);
                    me.ueditor.ready(function(){
                        me.ueditor.addListener('contentChange',function(){
                            me.fireEvent('change', me);
                            me.setValue(me.ueditor.getContent(),true);
                        });
                    });
                }
            }
        });
        this.callParent();
    },
    onDestroy:function () {
        if(this.ueditor){
            this.ueditor.destroy();
        }
    },
    getValue:function(){
        var me = this,
            value;
        if(me.ueditor){
            me.ueditor.ready(function(){
                me.value = me.ueditor.getContent();
            });
        }
        value = me.value;
        return value;
    },
    setValue:function(value,isChange){
        var me = this;
        if(value === null || value === undefined){
            value = "";
        }
        me.callParent(arguments);
        if(!isChange){
            if(me.ueditor){
                me.ueditor.ready(function(){
                    me.ueditor.setContent(value);
                });
            }
        }
        return me;
    }
});

使用UEditor.js组件

{
    xtype: 'ueditor',
    labelWidth: 50,
    fieldLabel: '内  容',
    width: 850
}

修改UEditor的ueditor.config.js弹出框层级，目的(防止UEditor弹窗被extjs的组件遮盖)

,zIndex : 19001     //编辑器层级的基数,默认是900, extjs中Form层级最高的是19000,所以这里改成19001