在使用ExtJS中的项目中可能会使用到富文本编辑器,但ExtJS4中提供的HtmlEditor功能不强,而且在IE下兼容性不好,所以就想把
CKEditor整合进ExtJS中,下面是整合源码:
主要是setValue与getValue方法,还有就是注册事件用于监听CKEditor的状态,上面注册的是instanceReady事件,其它事件同理。
Ext.define("Ext.ux.form.field.CKEditor", {
extend: 'Ext.form.field.TextArea',
alias: 'widget.ckeditor',
constructor : function() {
this.callParent(arguments);//必须先构造父类对象
this.addEvents("instanceReady");//注册一个instanceReady事件
},
initComponent: function () {
this.callParent(arguments);
this.on("afterrender", function(){
Ext.apply(this.CKConfig, {
height : this.getHeight(),
width : this.getWidth()
});
this.editor = CKEDITOR.replace(this.inputEl.id, this.CKConfig);
this.editor.name = this.name;//把配置中的name属性赋值给CKEditor的name属性
this.editor.on("instanceReady", function(){
this.fireEvent("instanceReady", this, this.editor);//触发instanceReady事件
}, this);
}, this);
},
onRender: function (ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag: 'textarea',
autocomplete: 'off'
};
}
this.callParent(arguments)
},
setValue: function (value) {
this.callParent(arguments);
if (this.editor) {
this.editor.setData(value);
}
},
getRawValue: function () {//要覆盖getRawValue方法,否则会取不到值
if (this.editor) {
return this.editor.getData();
} else {
return ''
}
},
getValue: function () {
return this.getRawValue();
}
});
主要是setValue与getValue方法,还有就是注册事件用于监听CKEditor的状态,上面注册的是instanceReady事件,其它事件同理。