extjs ueditor 图片_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: [

'

' name="{name}"',

' rows="{rows}" ',

' cols="{cols}" ',

' placeholder="{placeholder}"',

' size="{size}"',

' maxlength="{maxLength}"',

' readonly="readonly"',

' disabled="disabled"',

' tabIndex="{tabIdx}"',

// ' class="{fieldCls} {inputCls}" ',

' style="{fieldStyle}"',

' autocomplete="off">\n',

'{[Ext.util.Format.htmlEncode(values.value)]}',

'

',

{

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: [

'

' name="{name}"',

' rows="{rows}" ',

' cols="{cols}" ',

' placeholder="{placeholder}"',

' size="{size}"',

' maxlength="{maxLength}"',

' readonly="readonly"',

' disabled="disabled"',

' tabIndex="{tabIdx}"',

// ' class="{fieldCls} {inputCls}" ',

' style="{fieldStyle}"',

' autocomplete="off">\n',

'{[Ext.util.Format.htmlEncode(values.value)]}',

'

',

{

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

邮箱：287449943@qq.com