1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    5
    Vote Rating
    0
    iosoftgame is on a distinguished road

      0  

    Default CKEditor Extension

    CKEditor Extension


    Hello.

    First of all, I would like to say that I'm not sure if this is the right forum for this question But anyway, here it goes:

    I have been searching for an extension to ExtJS that will enable me to use CKEditor inside an ExtJS application, instead of the HtmlEditor ExtJS offeres, but I can't seem to find one.

    My question is therefore: Does there exists an CKEditor extension to ExtJS and if so, where can I download it?

    In advance, thanks.

    Best regards
    Morten Johansen

  2. #2
    Ext User sidaliextjs's Avatar
    Join Date
    Aug 2007
    Posts
    5
    Vote Rating
    0
    sidaliextjs is on a distinguished road

      0  

    Default


    Hi
    I think that is delivered with Group Office Community edition
    here is the code

    PHP Code:
    /****************************************************
    * FCKEditor Extension
    *****************************************************/


    Ext.form.FCKeditor = function(config){
        
    this.config config;
        
    Ext.form.FCKeditor.superclass.constructor.call(thisconfig);
        
    this.FCKid=0;
        
    this.MyisLoaded=false;
        
    this.MyValue='';
    };

    Ext.extend(Ext.form.FCKeditorExt.form.TextArea,  {
        
    onRender : function(ctposition){
            if(!
    this.el){
                
    this.defaultAutoCreate = {
                    
    tag"textarea",
                    
    autocomplete"off"                
                
    };
            }
            
    Ext.form.TextArea.superclass.onRender.call(thisctposition);
            
    //Hide textarea to stop flashing up before FCKEditor renders.
            
    this.hideMode "visibility"// set hideMode to visibility, to retain height.
            
    this.hidden true// hide textarea
            
            
    if(this.grow){
                
    this.textSizeEl Ext.DomHelper.append(document.body, {
                    
    tag"pre"cls"x-form-grow-sizer"
                
    });
                if(
    this.preventScrollbars){
                    
    this.el.setStyle("overflow""hidden");
                }
                
    this.el.setHeight(this.growMin);
            }
            if (
    this.FCKid==0this.FCKid=get_FCKeditor_id_value()
            
            
            
    setTimeout("loadFCKeditor('"+this.id+"',"this.container.getHeight() +");",100); //Change this.name to this.id
            
            
            //this.on('resize', this.textAreaResized, this);     
        
    },
        
    setValue : function(value){
            
    this.MyValue=value;
            if (
    this.FCKid==0this.FCKid=get_FCKeditor_id_value();
            
    // only after FCKeditor_OnComplete
            
    if (this.MyisLoaded){
              
    FCKeditorSetValue(this.FCKid,this.id,value); //Change this.name to this.id
            
    } else {
              
    //alert('MyisLoaded = false');
            
    }
            
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
        },

        
    getValue : function(){
            if (
    this.MyisLoaded){
                
    value=FCKeditorGetValue(this.id); //Change this.name to this.id
                
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
                if (
    Ext.form.TextArea.superclass.getValue(this))
                    return 
    Ext.form.TextArea.superclass.getValue(this);
                else
                    return 
    value;
            }else{
                return 
    this.MyValue;
            }
        },

        
    getRawValue : function(){
            if (
    this.MyisLoaded){
                
    value=FCKeditorGetValue(this.id); //Change this.name to this.id
                
    Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
                return 
    Ext.form.TextArea.superclass.getRawValue(this);
            }else{
                return 
    this.MyValue;
            }
        },
        
        
    textAreaResized : function(textareaadjWidthadjHeightrawWidthrawHeight){
            
            if(
    typeof(FCKeditorAPI)!= 'undefined')
            {
                    var 
    oEditor FCKeditorAPI.GetInstance(this.FCKid);
                    
    oEditor.EditorWindow.parent.frameElement.height rawHeight-51;
                    
    oEditor.EditorWindow.parent.frameElement.width rawWidth;
            }        
        }
    });
    Ext.reg('fckeditor'Ext.form.FCKeditor);


    function 
    loadFCKeditor(elementheight){
        
    oFCKeditor = new FCKeditorelement );
        
    oFCKeditor.BasePath      oFCKeditorOptions.BasePath;
        
    oFCKeditor.ToolbarSet    oFCKeditorOptions.ToolbarSet;
        
    oFCKeditor.Config        oFCKeditorOptions.Config;
        
    oFCKeditor.Height height;
        
    oFCKeditor.ReplaceTextarea();
        
        
    }
    function 
    FCKeditor_OnComplete(editorInstance){

        
    Ext.getCmp(editorInstance.Name).MyisLoaded=true;

        
    // Removed OnStatusChange element, does not appear to be need, cause permission error in IE
    }
    var 
    FCKeditor_value=new Array();
    function 
    FCKeditorSetValue(id,name,value){
        if ((
    id!=undefined)&&(name!=undefined)){
            if (
    value!=undefinedFCKeditor_value[id]=value;
            else if (
    FCKeditor_value[id]==undefinedFCKeditor_value[id]='';
            var 
    oEditor FCKeditorAPI.GetInstance(name);
            
    // some trouble in Opera 9.50
            
    if(oEditor!=undefinedoEditor.SetData(FCKeditor_value[id]);
        }
    }
    function 
    FCKeditorGetValue(name){
        if ((
    id!=undefined)&&(name!=undefined)){
            
    data='';
            var 
    oEditor FCKeditorAPI.GetInstance(name);
            
    // some trouble in Opera 9.50:
            //
            // message: Statement on line 36: Cannot convert undefined or null to Object
            // oEditor.GetData();
            //
            
    if(oEditor!=undefineddata=oEditor.GetData();
            return 
    data;
        }
    }
    var 
    FCKeditor_id_value;
    function 
    get_FCKeditor_id_value(){
        if (!
    FCKeditor_id_value){
            
    FCKeditor_id_value=0;
        }
        
    FCKeditor_id_value=FCKeditor_id_value+1;
        return 
    FCKeditor_id_value;

    Enjoy!

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

      0  

    Default


    My knowledge of ExtJS are still too poor to understand what I do.

    Can someone post a working example with ExtJS 3.0 and CKEditor 3.0?

    thanks

  4. #4
    Sencha User Alex84's Avatar
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    49
    Vote Rating
    0
    Alex84 is on a distinguished road

      0  

    Default


    Hm I tested it today. Replace

    PHP Code:
    oFCKeditor = new FCKeditorelement ); 
    with

    PHP Code:
    oFCKeditor = new CKEDITOR.replace(element); 
    And it works. I have the editor in a Tabpanel. Only the sizing not work correctly at the moment. The editor is smaller than my window and I can resize the editor in the window manually

    Edit:
    for Height replace
    PHP Code:
     oFCKeditor.Heightheight
    with
    PHP Code:
     oFCKeditor.config.height height
    here is a link to the docs: http://docs.fckeditor.net/ckeditor_a...OR.config.html



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

      0  

    Default


    A small complete example I would be very useful.
    thanks

  6. #6
    Sencha User Alex84's Avatar
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    49
    Vote Rating
    0
    Alex84 is on a distinguished road

      0  

    Default


    Here is a complete example for using FCKEditor Extension
    http://www.extjs.com/forum/showthread.php?t=17423

    When this works replace the two lines I posted and set the correct paths to CKEditor.

  7. #7
    Ext User
    Join Date
    Sep 2007
    Posts
    5
    Vote Rating
    0
    disfusion is on a distinguished road

      0  

    Default NEW CKEditor extension with example.

    NEW CKEditor extension with example.


    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 .
    Attached Files

  8. #8
    Sencha User Alex84's Avatar
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    49
    Vote Rating
    0
    Alex84 is on a distinguished road

      0  

    Default


    add a destroy Instance:

    PHP Code:
    ,destroyInstance: function(){
            if (
    CKEDITOR.instances[this.id]) {
                
    delete CKEDITOR.instances[this.id];
            }
        } 

  9. #9
    Ext User
    Join Date
    Aug 2009
    Posts
    5
    Vote Rating
    0
    iosoftgame is on a distinguished road

      0  

    Default


    Great, thanks for sharing

    I got a question: Is there a way to make CKEditor styled (themed) like ExtJS?
    I mean, right now CKEditor doesn't really blend in with the rest of the ExtJS theme.

  10. #10
    Ext User
    Join Date
    Sep 2007
    Posts
    5
    Vote Rating
    0
    disfusion is on a distinguished road

      0  

    Default


    You have a couple of choice to change how it looks.

    1. You can change the uiColor option.
    PHP Code:
        CKConfig: {
            
    customConfig '/ckeditor/config.js'
            
    toolbar'Basic',
            
    uiColor'#dfe8f6',
            
    height 200,
            
    width250
        

    2. You can change the Skin.
    PHP Code:
        CKConfig: {
            
    customConfig '/ckeditor/config.js'
            
    toolbar'Basic',
            
    skin'v2'// skin: 'office2003',
            
    height 200,
            
    width250
        

    3. Create your own CKEditor Skin. You will have to work that one out yourself ;-)

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi