CkEditor and (Sencha) Extjs

[russall1985]

From various other posts and trial and error I have created a CkEditor extension for Extjs. By extending Ext.form.TextArea and replacing the rendered textarea with the CkEditor instance you have a nice CkEditor within your extjs application. Resizing can be a pain but, I believe I have it working correctly, I tried in a window and a panel with collapsible sections and seems to be fine. The namespace is our open source Compass framework namespace, feel free to change it to suit your needs. If you want to check us out stop by http://www.portablemind.com or watch us on git hub https://github.com/portablemind/compass. You will notice a call to a method called Compass.ErpApp.Utility.isBlank throughout the code. This is a utility js file that we use, I included that method at the top of the source. Have fun.

/**
Ext.ns("Compass.ErpApp.Utility");
Compass.ErpApp.Utility.isBlank = function(value) {
    var result = false;

    if(value == 'undefined' || value == undefined || value == null || value == '' || value == ' '){
        result = true;
    }

    return result;
};

 * @class Compass.ErpApp.Shared.CKeditor
 * @extends Ext.form.TextArea
 * Converts a textarea into a CkEditor Instance
 * 
 * @author Russell Holmes - http://www.portablemind.com
 *
 * @additional config options
 * ckEditorConfig - configuration for CkEditor Instance
 */

Ext.ns("Compass.ErpApp.Shared");

Compass.ErpApp.Shared.CKeditor = Ext.extend(Ext.form.TextArea, {
    ckEditorInstance : null,

    constructor : function(config){
        config = Ext.apply({
            grow: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,
            skin:'office2003'
        });
        var editor = CKEDITOR.replace(this.el.dom.name, this.initialConfig.ckEditorConfig);
        editor.ui.addButton( 'CompassUploadFile',
        {
            label : 'Upload File',
            icon:'/images/erp_app/desktop/image_add.png',
            click : function (editor)
            {
                var uploadWindow = new Compass.ErpApp.Shared.UploadWindow();
                uploadWindow.show();
            }
        } );
        this.ckEditorInstance = editor;
    },

    textAreaResized : function(textarea, adjWidth, adjHeight, rawWidth, rawHeight){

        if(!Compass.ErpApp.Utility.isBlank(this.ckEditorInstance))
        {
            if(!Compass.ErpApp.Utility.isBlank(rawWidth) && !Compass.ErpApp.Utility.isBlank(rawHeight)){
                var el = document.getElementById('cke_contents_' + this.id);
                
                if(!Compass.ErpApp.Utility.isBlank(el)){
                    var toolBoxDiv = document.getElementById('cke_top_' + this.id).getElementsByTagName('div')[0];
                    var toolBoxEl = Ext.get(toolBoxDiv);
                    var displayValue = toolBoxEl.getStyle('display');
                    if(displayValue != 'none'){
                        this.ckEditorInstance.execCommand( 'toolbarCollapse' );
                        el.style.height = rawHeight - 51 + 'px';
                        this.ckEditorInstance.execCommand( 'toolbarCollapse' );
                    }
                    else{
                        el.style.height = rawHeight - 51 + 'px';
                    }
                    
                }
                else{
                    this.ckEditorInstance.config.height = rawHeight - 51;
                }
            }
        }
    },

    setValue : function(value){
        this.MyValue=value;
        this.ckEditorInstance.setData(value);
        Compass.ErpApp.Shared.CKeditor.superclass.setValue.apply(this,[value]);
    },

    getValue : function(){
        var value = this.ckEditorInstance.getData();
        Ext.form.TextArea.superclass.setValue.apply(this,[value]);
        return Compass.ErpApp.Shared.CKeditor.superclass.getValue(this);
    },

    getRawValue : function(){
        var value = this.ckEditorInstance.getData();
        Ext.form.TextArea.superclass.setRawValue(this, [value]);
        return Compass.ErpApp.Shared.CKeditor.superclass.getRawValue(this);
    },

    insertHtml : function(html){
        this.ckEditorInstance.insertHtml(html);
    }
});
Ext.reg('ckeditor', Compass.ErpApp.Shared.CKeditor);

Example Usage

this.ckEditor = new Compass.ErpApp.Shared.CKeditor({
            autoHeight:true,
            ckEditorConfig:{
                toolbar:[
                ['Source','-','Save','NewPage','Preview','-','Templates'],
                ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                '/',
                ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['BidiLtr', 'BidiRtl' ],
                ['Link','Unlink','Anchor'],
                ['Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
                '/',
                ['Styles','Format','Font','FontSize'],
                ['TextColor','BGColor'],
                ['Maximize', 'ShowBlocks','-','About']
                ]
            }
        });

or

ckEditor = {
xtype:'ckeditor',            
autoHeight:true,
            ckEditorConfig:{
                toolbar:[
                ['Source','-','Save','NewPage','Preview','-','Templates'],
                ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                '/',
                ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['BidiLtr', 'BidiRtl' ],
                ['Link','Unlink','Anchor'],
                ['Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
                '/',
                ['Styles','Format','Font','FontSize'],
                ['TextColor','BGColor'],
                ['Maximize', 'ShowBlocks','-','About']
                ]
            }
        }