1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    0
    JesusM is on a distinguished road

      0  

    Default CKEDITOR with EXTJS 4

    CKEDITOR with EXTJS 4


    Hello

    I´m trying to adapt CKEDITOR in EXTJS 4 but I have the next error CKEDITOR.instances[this.id] is undefined in the line:

    CKEDITOR.instances[this.id].setData(value);

    In EXTJS 3 it works perfectly!

    This is the code:

    editorCK = Ext.create('widget.ckeditor',{
    id:'editorCK',
    CKConfig: {
    customConfig : 'ckeditor/config.js',
    toolbar: 'Basic',
    height : 200,
    width: 500
    }

    });






    Ext.define('Ext.ux.CKeditor',{
    extend: 'Ext.form.field.TextArea',
    alias: 'widget.ckeditor',
    initComponent: function(){
    this.callParent(arguments);//Ext.ux.CKeditor.superclass.initComponent.apply(this, arguments);
    },
    onRender : function(ct, position){
    if(!this.el){
    this.defaultAutoCreate = {
    tag: 'textarea',
    autocomplete: 'off'
    };
    }
    Ext.form.field.TextArea.superclass.onRender.call(this, ct, position);
    CKEDITOR.replace(this.id, this.CKConfig);
    },
    setValue : function(value){
    Ext.form.field.TextArea.superclass.setValue.apply(this,[value]);
    CKEDITOR.instances[this.id].setData(value);
    CKEDITOR.instances[this.id] is undefined

    },
    getValue : function(){
    CKEDITOR.instances[this.id].updateElement();
    var value=CKEDITOR.instances[this.id].getData();
    Ext.form.field.TextArea.superclass.setValue.apply(this,[value]);
    return Ext.form.field.TextArea.superclass.getValue.apply(this);
    },
    getRawValue : function(){
    CKEDITOR.instances[this.id].updateElement();
    return Ext.form.field.TextArea.superclass.getRawValue(this);
    }
    });

    Can anyone help me, please?

    Thanks!

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    378
    Vote Rating
    2
    silcreval is on a distinguished road

      0  

    Default


    It doesnt look like you've instantiated CKEDITOR anywhere. Shouldnt you be
    creating CKEDITOR in the initComponent method, ie

    this.CKEDITOR = new .....

    and then referring to it in the methods as

    this.CKEDITOR

    also you probably want to be using callParent(arguments) rather than superclass
    in the method overrides.

    Ian.

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    45
    Vote Rating
    0
    codeart.ch is on a distinguished road

      0  

    Default


    I think this code

    Code:
    CKEDITOR.replace(this.id, this.CKConfig);
    makes a instance of ckeditor.

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    171
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    Did you get this working? I need to explore alternatives to the htmlEditor.

  5. #5
    Sencha User dorgan's Avatar
    Join Date
    Dec 2007
    Location
    Cocoa, FL
    Posts
    286
    Vote Rating
    -1
    dorgan is an unknown quantity at this point

      0  

    Default


    Why explore alternatives?? Why not extend it you can add buttons and custom functionality.

  6. #6
    Sencha User
    Join Date
    May 2010
    Posts
    171
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    I looked into extending the htmlEditor but I couldn't make sense of it. Specifically I wanted to be able to select h1, h2, h3 tags. As I want to enable text editing but still maintain control over the style.

    the other problem I have is pasting. I want to be able to paste as plain text. not only can I not paste as plain text in the htmlEditor if the text is plain text to begin with it's automatically wrapped in font and style tags.

  7. #7
    Sencha User dorgan's Avatar
    Join Date
    Dec 2007
    Location
    Cocoa, FL
    Posts
    286
    Vote Rating
    -1
    dorgan is an unknown quantity at this point

      0  

    Default


    I would highly suggest looking at the src to the htmlEditor....when I needed to customize it thats what I did and found the proper functions to use to do everything I was trying to do.

  8. #8
    Sencha User
    Join Date
    May 2008
    Posts
    24
    Vote Rating
    0
    prout_boudin is on a distinguished road

      0  

    Default Functionning code

    Functionning code


    Dear all,

    here is a full functionning code :

    Ext
    .define('Ext.ux.CKeditor',{

    extend
    :'Ext.form.field.TextArea',

    alias
    :'widget.ckeditor',



    initComponent
    :function(){


    this.callParent(arguments);




    this.on('afterrender',function(){



    Ext
    .apply(this.CKConfig ,{

    height
    :this.getHeight()


    });


    this.editor = CKEDITOR.replace(this.inputEl.id,this.CKConfig);


    this.editorId =this.editor.id;


    },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(){


    if(this.editor){


    returnthis.editor.getData()


    }else{


    return''


    }


    }

    });



     

    CKEDITOR
    .on('instanceReady',function(e){




    var o = Ext.ComponentQuery.query('ckeditor[editorId="'+ e.editor.id +'"]'),

    comp
    = o[0];

    e
    .editor.resize(comp.getWidth(), comp.getHeight())

    comp
    .on('resize',function(c,adjWidth,adjHeight){

    c
    .editor.resize(adjWidth, adjHeight)


    })

    });

  9. #9
    Sencha User
    Join Date
    Jul 2011
    Posts
    8
    Vote Rating
    0
    mr.amin0 is on a distinguished road

      0  

    Default


    I found a bug, I have a ckeditor in a tab panel, if i switch to a different tab before the editor is fully loaded, it collapses in firefox and IE. In IE even breaks so far the this.editor value is corrupt, and it won't respond to setvalue and getvalue.
    In chrome it keeps working like it should.
    Any advice ?

  10. #10
    Sencha User
    Join Date
    May 2009
    Posts
    29
    Vote Rating
    2
    Antjac is on a distinguished road

      0  

    Default


    Try to add the parameter "deferredRender : false" in you tabPanel

Similar Threads

  1. CKEditor Extension
    By iosoftgame in forum Ext 3.x: User Extensions and Plugins
    Replies: 40
    Last Post: 24 Feb 2014, 12:48 AM
  2. ExtJs 3.x and CKEditor 3.5 causing problems
    By johnmmr in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 26 Apr 2011, 12:03 PM
  3. CKEditor-GWT FitLayout
    By elirov in forum Community Discussion
    Replies: 4
    Last Post: 16 Feb 2011, 3:57 AM
  4. CkEditor and (Sencha) Extjs
    By russall1985 in forum Community Discussion
    Replies: 0
    Last Post: 10 Feb 2011, 7:15 AM
  5. Initialize panel as disabled with embedded ckeditor
    By ChrisR in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 10 Jan 2011, 1:44 PM

Thread Participants: 12