1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    6
    Vote Rating
    0
    willchan is on a distinguished road

      0  

    Exclamation Ext JS 3 to 4 Migration about Fckeditor

    Ext JS 3 to 4 Migration about Fckeditor


    hi everyone:
    I extend TextArea to Fckeditor,The code below is work in EXTJS 3.* ,and I try to upgrade to EXTJS 4 ,It can't work. I download the Ext JS 3 to 4 Migration Pack can't work too.

    In EXTJS 3.* code work good:
    Code:
    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, Ext.apply({
                skin: 'kama'
            }, this.config.CKConfig));
        },
    
        setValue: function (value) {
            if (Ext.isEmpty(value)) {
                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);
    I change the code in EXT 4 can't work:
    Code:
    Ext.form.CKEditor = function (config) {
        this.config = config;
        Ext.form.CKEditor.superclass.constructor.call(this, config);
    };
    
    Ext.define('Ext.form.CKEditor', {
        extend: 'Ext.form.TextArea',
        alias: 'ckeditor',
        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, Ext.apply({
                skin: 'kama'
            }, this.config.CKConfig));
        },
    
        setValue: function (value) {
            if (Ext.isEmpty(value)) {
                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);
        }
    });

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    6
    Vote Rating
    0
    willchan is on a distinguished road

      0  

    Default help

    help


    help

  3. #3
    Sencha User russall1985's Avatar
    Join Date
    Mar 2010
    Posts
    9
    Vote Rating
    0
    russall1985 is on a distinguished road

      0  

    Default


    I have a ckeditor Extjs wrapper that I created that works with Extjs 4. The difference that I had to fix in extjs4 is that setValue gets called before onRender now, so as you can see I had to set a default value to the object and then set the ckeditor in the onRender method when it is added to the dom.

    Code:
    /**
     * @class Compass.ErpApp.Shared.CKeditor
     * @extends Ext.form.field.TextArea
     * Converts a textarea into a CkEditor Instance
     * 
     * @author Russell Holmes / http://www.portablemind.com
     *
     * @additional config options
     * ckEditorConfig - configuration for CkEditor Instance
     */
    
    Ext.define("Compass.ErpApp.Shared.CKeditor",{
        extend:"Ext.form.field.TextArea",
        alias:'widget.ckeditor',
        ckEditorInstance : null,
    
        initComponent: function() {
            Compass.ErpApp.Shared.CKeditor.superclass.initComponent.call(this, arguments);
    
            this.addEvents(
                /**
             * @event save
             * Fired when saving contents.
             * @param {Compass.ErpApp.Shared.CKeditor} cKeditor This object
             * @param (contents) contents needing to be saved
             */
                'save'
                );
        },
    
        constructor : function(config){
            config = Ext.apply({
                grow:true,
                hideLabel:true
            },config);
            Compass.ErpApp.Shared.CKeditor.superclass.constructor.call(this, config);
        },
    
        onRender : function(ct, position){
            Compass.ErpApp.Shared.CKeditor.superclass.onRender.call(this, ct, position);
            this.setupCkEditor();
            this.on('resize', this.textAreaResized, this);
        },
    
        setupCkEditor : function(){
            Ext.applyIf(this.initialConfig.ckEditorConfig,{
                resize_enabled:false,
                base_path:'/javascripts/ckeditor/',
                toolbarStartupExpanded:false,
                shiftEnterMode:CKEDITOR.ENTER_P,
                skin:'office2003',
                extraPlugins:'codemirror'
            });
            var editor = CKEDITOR.replace(this.inputEl.id, this.initialConfig.ckEditorConfig);
            editor.extjsPanel = this;
            this.ckEditorInstance = editor;
            this.setValue(this.defaultValue);
        },
    
        textAreaResized : function(textarea, adjWidth, adjHeight){
    
            if(!Compass.ErpApp.Utility.isBlank(this.ckEditorInstance))
            {
                if(!Compass.ErpApp.Utility.isBlank(adjWidth) && !Compass.ErpApp.Utility.isBlank(adjHeight)){
                    var el = document.getElementById('cke_contents_' + this.inputEl.id);
                    
                    if(!Compass.ErpApp.Utility.isBlank(el)){
                        var toolBoxDiv = document.getElementById('cke_top_' + this.inputEl.id).getElementsByTagName('div')[0];
                        var toolBoxEl = Ext.get(toolBoxDiv);
                        var displayValue = toolBoxEl.getStyle('display');
                        if(displayValue != 'none'){
                            this.ckEditorInstance.execCommand( 'toolbarCollapse' );
                            el.style.height = adjHeight - 51 + 'px';
                            this.ckEditorInstance.execCommand( 'toolbarCollapse' );
                        }
                        else{
                            el.style.height = adjHeight - 51 + 'px';
                        }
    					
                    }
                    else{
                        this.ckEditorInstance.config.height = adjHeight - 51;
                    }
                }
            }
        },
    
        setValue : function(value){
            if(this.ckEditorInstance){
                this.ckEditorInstance.setData(value);
            }
            else{
                this.defaultValue = value;
            }
                
        },
    
        getValue : function(){
            if(this.ckEditorInstance)
                var value = this.ckEditorInstance.getData();
            return value;
        },
    
        getRawValue : function(){
            if(this.ckEditorInstance)
                var value = this.ckEditorInstance.getData();
            return value;
        },
    
        insertHtml : function(html){
            this.ckEditorInstance.insertHtml(html);
        }
    });

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    4
    Vote Rating
    0
    kayakman is on a distinguished road

      0  

    Default I need help badly.

    I need help badly.


    Thanks Russall. That got me far but my problem is all the CKeditor modal popups are appearing behind the ExtJS windows. Like they are disabled and layers below in the z-index.

    Any help you or anyone can offer?

    I used your code but removed the textarearesized part of the code as I was receiving an error regarding "Compass.ErpApp.Utility.isBlank". Maybe that is part of the problem? I also added xtype so that I can reference it to the textarea I want activated.

    My code snippit I used is as follows:

    Code:
    Ext.define("Compass.ErpApp.Shared.CKeditor",{
        extend:"Ext.form.field.TextArea",
        alias:'widget.ckeditor',
        ckEditorInstance : null,
        xtype: 'ckeditor',
        initComponent: function() {
            Compass.ErpApp.Shared.CKeditor.superclass.initComponent.call(this, arguments);
    
            this.addEvents(
                /**
             * @event save
             * Fired when saving contents.
             * @param {Compass.ErpApp.Shared.CKeditor} cKeditor This object
             * @param (contents) contents needing to be saved
             */
                'save'
                );
        },
    
        constructor : function(config){
            config = Ext.apply({
                grow:true,
                hideLabel:true
            },config);
            Compass.ErpApp.Shared.CKeditor.superclass.constructor.call(this, config);
        },
    
        onRender : function(ct, position){
            Compass.ErpApp.Shared.CKeditor.superclass.onRender.call(this, ct, position);
            this.setupCkEditor();
            this.on('resize', this.textAreaResized, this);
        },
    
        setupCkEditor : function(){
            Ext.applyIf(this.initialConfig.ckEditorConfig,{
                resize_enabled:false,
                base_path:'/javascripts/ckeditor/',
                toolbarStartupExpanded:false,
                shiftEnterMode:CKEDITOR.ENTER_P,
                skin:'office2003',
                extraPlugins:'codemirror'
            });
            var editor = CKEDITOR.replace(this.inputEl.id, this.initialConfig.ckEditorConfig);
            editor.extjsPanel = this;
            this.ckEditorInstance = editor;
            this.setValue(this.defaultValue);
        },
    
       
    
        setValue : function(value){
            if(this.ckEditorInstance){
                this.ckEditorInstance.setData(value);
            }
            else{
                this.defaultValue = value;
            }
                
        },
    
        getValue : function(){
            if(this.ckEditorInstance)
                var value = this.ckEditorInstance.getData();
            return value;
        },
    
        getRawValue : function(){
            if(this.ckEditorInstance)
                var value = this.ckEditorInstance.getData();
            return value;
        },
    
        insertHtml : function(html){
            this.ckEditorInstance.insertHtml(html);
        }
    });

  5. #5
    Sencha User
    Join Date
    Dec 2013
    Posts
    4
    Vote Rating
    0
    kayakman is on a distinguished road

      0  

    Default


    Nevermind... I changed the setting in CKeditor as follows:

    config.baseFloatZIndex = 40000;

    see here: http://docs.cksource.com/ckeditor_ap...OR.config.html

  6. #6
    Sencha User
    Join Date
    Dec 2013
    Posts
    4
    Vote Rating
    0
    kayakman is on a distinguished road

      0  

    Default


    Acutally I have another problem. Now I am getting this error when CKeditor loads up on a panel... "TypeError: l is undefined" for ext-all.js

Similar Threads

  1. FCKEditor in TabPanel
    By TKONeo in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Sep 2009, 5:49 AM
  2. fckeditor
    By zeroed in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 27 Feb 2009, 9:09 AM
  3. FCKEditor within EditorGrid
    By B3lf4g0r in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 7 Jan 2009, 4:35 AM
  4. FCKeditor and GXT?
    By pepez in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 17 Dec 2008, 7:10 AM
  5. fckeditor with Ext2.0
    By rahulmca1@gmail.com in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Jan 2008, 3:53 AM

Thread Participants: 2