首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。