ExtJs 整合UEditor and KindEditor

標籤：des   style   blog   http   java   使用   os   檔案   

貢獻兩個Extjs 4.2 編輯器外掛程式

1.UEditor(使用頁面需要引用UEditor相關檔案)

Ext.define(‘App.ux.UEditor‘, {    extend: ‘Ext.form.field.Text‘,    alias: [‘widget.ueditor‘],    //alternateClassName: ‘Ext.form.UEditor‘,    fieldSubTpl: [        ‘<textarea id="{id}" {inputAttrTpl}‘,            ‘<tpl if="name"> name="{name}"</tpl>‘,            ‘<tpl if="rows"> rows="{rows}" </tpl>‘,            ‘<tpl if="cols"> cols="{cols}" </tpl>‘,            ‘<tpl if="placeholder"> placeholder="{placeholder}"</tpl>‘,            ‘<tpl if="size"> size="{size}"</tpl>‘,            ‘<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>‘,            ‘<tpl if="readOnly"> readonly="readonly"</tpl>‘,            ‘<tpl if="disabled"> disabled="disabled"</tpl>‘,            ‘<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>‘,    //            ‘ class="{fieldCls} {inputCls}" ‘,            ‘<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>‘,            ‘ autocomplete="off">\n‘,            ‘<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>‘,        ‘</textarea>‘,        {            disableFormats: true        }    ],    ueditorConfig: {},    initComponent: function () {        var me = this;        me.callParent(arguments);    },    afterRender: function () {        var me = this;        me.callParent(arguments);        if (!me.ue) {            me.ue = UE.getEditor(me.getInputId(), Ext.apply(me.ueditorConfig, {                initialFrameHeight: me.height || ‘300px‘,                initialFrameWidth: ‘100%‘            }));            me.ue.ready(function () {                me.UEditorIsReady = true;            });　　　　　　//這塊 組件的父容器關閉的時候 需要銷毀編輯器 否則第二次渲染的時候會出問題 可根據具體布局調整            var win = me.up(‘window‘);            if (win && win.closeAction == "hide") {                win.on(‘beforehide‘, function () {                    me.onDestroy();                });            } else {                var panel = me.up(‘panel‘);                if (panel && panel.closeAction == "hide") {                    panel.on(‘beforehide‘, function () {                        me.onDestroy();                    });                }            }        } else {            me.ue.setContent(me.getValue());        }    },    setValue: function (value) {        var me = this;        if (!me.ue) {            me.setRawValue(me.valueToRaw(value));        } else {            me.ue.ready(function () {                me.ue.setContent(value);            });        }        me.callParent(arguments);        return me.mixins.field.setValue.call(me, value);    },    getRawValue: function () {        var me = this;        if (me.UEditorIsReady) {            me.ue.sync(me.getInputId());        }        v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ‘‘));        me.rawValue = v;        return v;    },    destroyUEditor: function () {        var me = this;        if (me.rendered) {            try {                me.ue.destroy();                var dom = document.getElementById(me.id);                if (dom) {                    dom.parentNode.removeChild(dom);                }                me.ue = null;            } catch (e) { }        }    },    onDestroy: function () {        var me = this;        me.callParent();        me.destroyUEditor();    }});

　　　　

1.KindEditor(使用頁面需要引用KindEditor相關檔案)

Ext.define(‘App.ux.KindEditor‘, {    extend: ‘Ext.form.field.Text‘,    alias: [‘widget.kindeditor‘],    alternateClassName: ‘Ext.form.KindEditor‘,    fieldSubTpl: [        ‘<textarea id="{id}" {inputAttrTpl}‘,            ‘<tpl if="name"> name="{name}"</tpl>‘,            ‘<tpl if="rows"> rows="{rows}" </tpl>‘,            ‘<tpl if="cols"> cols="{cols}" </tpl>‘,            ‘<tpl if="placeholder"> placeholder="{placeholder}"</tpl>‘,            ‘<tpl if="size"> size="{size}"</tpl>‘,            ‘<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>‘,            ‘<tpl if="readOnly"> readonly="readonly"</tpl>‘,            ‘<tpl if="disabled"> disabled="disabled"</tpl>‘,            ‘<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>‘,    //            ‘ class="{fieldCls} {inputCls}" ‘,            ‘<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>‘,            ‘ autocomplete="off">\n‘,            ‘<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>‘,        ‘</textarea>‘,        {            disableFormats: true        }    ],    kindeditorConfig: {},    initComponent: function () {        var me = this;        me.callParent(arguments);    },    afterRender: function () {        var me = this;        me.callParent(arguments);        if (!me.ke) {            me.ke = KindEditor.create("#" + me.getInputId(), Ext.apply(me.kindeditorConfig, {                height: me.height || ‘300px‘,                width: ‘100%‘,                afterCreate: function () {                    me.KindEditorIsReady = true;                }            }));　　　　　　//這塊 組件的父容器關閉的時候 需要銷毀編輯器 否則第二次渲染的時候會出問題 可根據具體布局調整            var win = me.up(‘window‘);            if (win && win.closeAction == "hide") {                win.on(‘beforehide‘, function () {                    me.onDestroy();                });            } else {                var panel = me.up(‘panel‘);                if (panel && panel.closeAction == "hide") {                    panel.on(‘beforehide‘, function () {                        me.onDestroy();                    });                }            }        } else {            me.ke.html(me.getValue());        }    },    setValue: function (value) {        var me = this;        if (!me.ke) {            me.setRawValue(me.valueToRaw(value));        } else {            me.ke.html(value.toString());        }        me.callParent(arguments);        return me.mixins.field.setValue.call(me, value);    },    getRawValue: function () {        var me = this;        if (me.KindEditorIsReady) {            me.ke.sync();        }        v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ‘‘));        me.rawValue = v;        return v;    },    destroyKindEditor: function () {        var me = this;        if (me.rendered) {            try {                me.ke.remove();                var dom = document.getElementById(me.id);                if (dom) {                    dom.parentNode.removeChild(dom);                }                me.ke = null;            } catch (e) { }        }    },    onDestroy: function () {        var me = this;        me.destroyKindEditor();        me.callParent(arguments);    }});

　　

 

使用方法：

{fieldLabel: ‘UEditor‘,name: "email",id: "testueditor",xtype: ‘ueditor‘,anchor: ‘-20‘,height: 150,ueditorConfig: {//編輯器配置項}}, {fieldLabel: ‘KindEditor‘,name: "id",id: "testkindeditor",xtype: ‘kindeditor‘,anchor: ‘-20‘,height: 150,kindeditorConfig: {//編輯器配置項}}

　　

.NET MVC Extjs 門戶網站、行業軟體 開發

郵箱：[email protected]