CKFinder - is good. I use CKEditor just because it supported by CKFinder
CKFinder - is good. I use CKEditor just because it supported by CKFinder
I have a modified version of the ck editor embedding code in: http://gist.github.com/642171 that solves the problems when adding in multiple tab panels and a few more I could spot. Please tell me if I 'm missing something.
how to integrate their solution with CKFinder?
might like the following?:
Code:.... Ext.ux.form.CKEditor.superclass.constructor.call(this, this.config); }; Ext.extend(Ext.ux.form.CKEditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea.superclass.onRender.call(this, ct, position); CKFinder.setupCKEditor( null, '/media/js/ckfinder/' ); // patch to ckfinder folder CKEDITOR.replace(this.id, this.config.CKConfig); }, setValue : function(value){ Ext.form.TextArea.superclass.setValue.call(this,[value]); var ck = CKEDITOR.instances[this.id]; ....
and what ckeditor field validation?????????
Regards
i have the same problem than arnab_ghosh. On IE, I have every time the old value. Any idee?
?????????form.getForm().getFieldValues(false);?????bug
Code:/******************************************************************************* * CKEditor Extension ******************************************************************************/ Ext.form.CKEditor = function(config) { this.config = config; Ext.form.CKEditor.superclass.constructor.call(this, config); }; Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, { hideLabel : true, constructor : function(config) { config = config || {}; config.listeners = config.listeners || {}; Ext.applyIf(config.listeners, { beforedestroy : this.onBeforeDestroy .createDelegate(this), scope : this }); Ext.form.CKEditor.superclass.constructor.call(this, config); }, onBeforeDestroy : function() { this.ckEditor.destroy(); }, onRender : function(ct, position) { if (!this.el) { this.defaultAutoCreate = { tag : "textarea", autocomplete : "off" }; } Ext.form.TextArea.superclass.onRender.call(this, ct, position); this.ckEditor = CKEDITOR.replace(this.id, this.config.CKConfig); }, setValue : function(value) { Ext.form.TextArea.superclass.setValue.apply(this, [value]); CKEDITOR.instances[this.id].setData(value); }, getValue : function() { CKEDITOR.instances[this.id].updateElement(); this.value = CKEDITOR.instances[this.id].getData(); return Ext.form.TextArea.superclass.getValue.apply(this); }, getRawValue : function() { CKEDITOR.instances[this.id].updateElement(); this.value = CKEDITOR.instances[this.id].getData(); return Ext.form.TextArea.superclass.getRawValue.apply(this); } }); Ext.reg('ckeditor', Ext.form.CKEditor);
how to dynamically replace the textarea field to ckeditor field using the button label such as a textarea field???
As it's known, the CKEditor uses iframe to display the content, therefore you cannot "catch" when data are changed using the standard methods
This is a little "trick" that might be useful when you do need to know if data in CKEditor has been changed or not
The ckeditor field definition looks like:
Then, after the CKEditor is loaded and initialized, you can "catch" the onBlur event of iframe and identify if data has been changed:Code:{ name: your_name, id : your_id, xtype : 'ckeditor', CKConfig: YourCustomConfig, value: your_value /*... anything else ...*/ }
your_id - should be the same in CKEditor definition and "catcher"Code:if ( Ext.getCmp(your_id) ){ CKEDITOR.instances[your_id].on("instanceReady", function(){ CKEDITOR.instances[your_id].on('blur', function(){ var obj = Ext.getCmp(your_id); if ( obj && obj.originalValue != CKEDITOR.instances[your_id].getData() ){ // data changed - do something! } }); }); }
I haven't set up listener on "keyup" or "keydown" events but you may try them as well
Hi all,
There's any workaround to stablish the height of the CKEditor in order to fit to an existing layout?
Regards,
Ricardo
Here is a slight modification to the code above:
With this it works when the ckeditor component is not renderedgetValue : function(){
if(!Ext.isEmpty(CKEDITOR.instances[this.id]))
{
CKEDITOR.instances[this.id].updateElement();
var value=CKEDITOR.instances[this.id].getData();
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
}
return Ext.form.TextArea.superclass.getValue.apply(this);
},