首页 > 代码库 > ExtJs 集成UEditor and KindEditor

ExtJs 集成UEditor and KindEditor

贡献两个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 = http://www.mamicode.com/v;>

    

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 = http://www.mamicode.com/v;>

  

 

使用方法:

{	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 门户网站、行业软件 开发

邮箱:287449943@qq.com