1. #11
    Ext User
    Join Date
    Sep 2009
    Posts
    1
    Vote Rating
    0
    jasonchen0309 is on a distinguished road

      0  

    Default


    Quote Originally Posted by disfusion View Post
    Hi Guys

    I have been playing with CKEditor and Ext JS. I stripped down the FCKEditor example and created the following which seems to work for me. It is only the basics at the moment, not sure if more is needed.

    the ckeditor.js extension file looks like this.
    PHP Code:
    /****************************************************
    * CKEditor Extension
    *****************************************************/
    Ext.form.CKEditor = function(config){
        
    this.config config;
        
    Ext.form.CKEditor.superclass.constructor.call(thisconfig);
    };

    Ext.extend(Ext.form.CKEditorExt.form.TextArea,  {
        
    onRender : function(ctposition){
            if(!
    this.el){
                
    this.defaultAutoCreate = {
                    
    tag"textarea",
                    
    autocomplete"off"
                
    };
            }
            
    Ext.form.TextArea.superclass.onRender.call(thisctposition);
            
    CKEDITOR.replace(this.idthis.config.CKConfig);
        },
        
        
    setValue : function(value){
            
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
            
    CKEDITOR.instances[this.id].setDatavalue );
        },

        
    getValue : function(){
            
    CKEDITOR.instances[this.id].updateElement();
            return 
    Ext.form.TextArea.superclass.getValue(this);
        },

        
    getRawValue : function(){
            
    CKEDITOR.instances[this.id].updateElement();    
            return 
    Ext.form.TextArea.superclass.getRawValue(this);
        }
    });
    Ext.reg('ckeditor'Ext.form.CKEditor); 
    The Ext Js Form item is as follows:
    PHP Code:
        {
            
    xtype'ckeditor',
            
    fieldLabel'Editor',
            
    name'htmlcode',
            
    CKConfig: {
                
    /* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
                
    customConfig '/ckeditor/config.js',        
                
    toolbar'Basic',
                
    height 200,
                
    width250
            
    }
        } 
    You can enter CKEditor config paramaters in the CKConfig paramater or define a custom CKEditor config file and point to that.

    I have also created an example application based on the "Form with embedded Grid" from the Ext JS 3.0 example file.

    just download Ext JS 3.0 and CKEditor 3.0 and the example file extract them all and it should work, hopefully .


    So nice...thx...

    Wish you can make it to full version...

  2. #12
    Sencha User armagedon's Avatar
    Join Date
    Nov 2008
    Posts
    31
    Vote Rating
    0
    armagedon is on a distinguished road

      0  

    Question How to fix the height of ckeditor?

    How to fix the height of ckeditor?


    @disfusion - thx very much for your work, it´s nice

    Unfortunately the ckeditor-component does not respect the layout of the parent container. If the parent conatiner has layout set to 'fit' the ckeditor's height is not fitting. Also on resize. The width is always perfect.

    Do you have some Idea how to fix this?
    thx

  3. #13
    Sencha User
    Join Date
    Mar 2007
    Location
    Tours, France
    Posts
    97
    Vote Rating
    0
    wehtam is on a distinguished road

      0  

    Default


    Thanks a lot for this extension.
    That works perfect, but I have a little problem.
    I would like change the content HTLM with a ajax fonction.
    My code :
    Code:
     {
                    xtype: 'combo',
                    fieldLabel: 'Template',
                    store: ds_template,
                    displayField:'LibelleTemplate',
                    valueField: 'IdTemplate',
                    hiddenName: 'IdTemplate', 
                    typeAhead: true,
                    mode: 'local',
                    triggerAction: 'all',
                    emptyText: 'Select...',
                    selectOnFocus: true,
                    forceSelection: true,
                    editable: false,
                    allowBlank: false,
                    listeners: {
                        select: function(combo){
                        
                            Ext.Ajax.request({
                                url: '/ajaxInfoTemplate.php',
                                method: 'POST',
                                params: {
                                    IdTemplate: this.getValue()
                                },
                                success: function(response, options){
                          CKEDITOR.instances.contenu.setData(response.responseText);
                       
                                }
                            });
                        }
                    }
                },{
                   xtype: 'ckeditor',
                    fieldLabel: 'Contenu HTML',
                    name: 'contenu',
    				CKConfig: {
    					customConfig : '/ckeditor/config.php', 
    					toolbar: 'TEST',
    					height : 400,
    					width: 650				
    				}
                }
    When I select a value in my combo, I have the error "CKEDITOR.instances.contenu is undefined" with :
    Code:
    CKEDITOR.instances.contenu.setData(response.responseText);


    Can you help me please ?
    Thanks
    ps : sorry for my very bad english

  4. #14
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    295
    Vote Rating
    3
    wki01 is on a distinguished road

      0  

    Default


    I have been playing with CKEditor and Ext JS. I stripped down the FCKEditor example.
    seems not to work applyTo.

    any ideas?
    thanks

    My example:

    index.html:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>CKEditor Form</title>
        <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="ext-3.0.0/ext-all-debug.js"></script>
     
     <!-- Load CKEditor Library -->
     <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
     
     <!-- Load EXTJS CKEditor Extension -->
     <script type="text/javascript" src="ckeditor.js"></script>
     
     <!-- Load Example Code -->
     <script type="text/javascript" src="example.js"></script>
    <body>
    <!-- EXAMPLES -->
    <h1>Example of CKEditor in a Form.</h1>
    <textarea id="desc"  name="desc" rows="2" cols="20"></textarea>
    </body>
    </html>
    example.js:
    Code:
    Ext.onReady(function(){
     new Ext.form.CKEditor({ 
         applyTo: 'desc', 
      CKConfig: {
       height : 200,
       width: 250
      }
     }); 
    });

  5. #15
    Ext User
    Join Date
    Jan 2010
    Posts
    2
    Vote Rating
    0
    Kapweb is on a distinguished road

      0  

    Default Ckeditor, with destroy Instance

    Ckeditor, with destroy Instance


    Hello,

    good job, thanks !

    I just put this modified code with the destroy instance :

    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,  {
        onRender : function(ct, position){
            if(!this.el){
                this.defaultAutoCreate = {
                    tag: "textarea",
                    autocomplete: "off"
                };
            }
            Ext.form.TextArea.superclass.onRender.call(this, ct, position);
            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();
            return Ext.form.TextArea.superclass.getValue(this);
        },
    
        getRawValue : function(){
            CKEDITOR.instances[this.id].updateElement();    
            return Ext.form.TextArea.superclass.getRawValue(this);
        }
        ,onDestroy: function(){
            if (CKEDITOR.instances[this.id]) {
                delete CKEDITOR.instances[this.id]; // This destroy the instance
            }
        } 
    
    });
    Ext.reg('ckeditor', Ext.form.CKEditor);
    Have a good day.
    And sorry for my English, I'm french

    Damien.

  6. #16
    Ext User
    Join Date
    Jul 2009
    Posts
    1
    Vote Rating
    0
    panyi1982 is on a distinguished road

      0  

    Default


    i have own file browser(design by ext3.1),how adding to ckeditor

  7. #17
    Ext User
    Join Date
    Jan 2010
    Posts
    2
    Vote Rating
    0
    Kapweb is on a distinguished road

      0  

    Default


    Hi panyi1982 ,

    Just read that :
    http://docs.cksource.com/CKEditor_3....%28Uploader%29

    All is explicated.

    I do the same work. But my media browser not finish, so i can't help you for ck editor now.

    Have a good Day !

    And always sorry for my verry bad english.

  8. #18
    Sencha User
    Join Date
    Sep 2009
    Posts
    112
    Vote Rating
    0
    asagala is on a distinguished road

      0  

    Default


    if this extension is used in form with trackResetOnLoad: true it doesnt seem to respect the isDirty concept. Anyone have a clue how to fix it?

  9. #19
    Sencha Premium Member
    Join Date
    Feb 2010
    Posts
    5
    Vote Rating
    0
    ragam is on a distinguished road

      0  

    Default CKEditor doesnt display while trying to remove and add it in a panel

    CKEditor doesnt display while trying to remove and add it in a panel


    Great job done on ckeditor.

    A small issue when using.

    When i try to remove and add a ckeditor inside a panel the second which is getting added will not display.

    Can any one help.

    Thanksin advance

  10. #20
    Sencha Premium Member
    Join Date
    Feb 2010
    Posts
    5
    Vote Rating
    0
    ragam is on a distinguished road

      0  

    Default Excellent extension

    Excellent extension


    Good job