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

      0  

    Post CkEditor and (Sencha) Extjs

    CkEditor and (Sencha) Extjs


    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.

    Code:
    /**
    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

    Code:
    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

    Code:
    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']
                    ]
                }
            }
    Last edited by russall1985; 10 Feb 2011 at 8:46 AM. Reason: Added example

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. 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
  3. Sencha Touch = extJS 3.x or extJS 4.0?
    By bardaste in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 14 Dec 2010, 6:23 AM
  4. Thank you EXTJS / Sencha
    By sosy in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Aug 2010, 12:53 PM
  5. Sencha vs ExtJs
    By florin@bytenotes.com in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 3 Jul 2010, 5:42 PM
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