Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: CKEDITOR with EXTJS 4

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default CKEDITOR with EXTJS 4

    Hello

    Im 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
    379
    Vote Rating
    2
      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
      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
    177
    Vote Rating
    2
      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
      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
    177
    Vote Rating
    2
      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
      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
      0  

    Default 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
      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
    30
    Vote Rating
    2
      0  

    Default

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

Page 1 of 2 12 LastLast

Similar Threads

  1. CkEditor and (Sencha) Extjs
    By russall1985 in forum Community Discussion
    Replies: 1
    Last Post: 5 Aug 2015, 10:14 PM
  2. CKEditor Extension
    By iosoftgame in forum Ext 3.x: User Extensions and Plugins
    Replies: 40
    Last Post: 24 Feb 2014, 12:48 AM
  3. 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
  4. CKEditor-GWT FitLayout
    By elirov in forum Community Discussion
    Replies: 4
    Last Post: 16 Feb 2011, 3:57 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •