Extjs ckEditor 사용하기

아래에 사용된 소스는 Sencha.com에서 가져왔습니다.

Extjs 4에서 적용가능.

기존 소스에는 아래와 같이 되어 있는데 작동을 안해서

setupCkEditor : function(){
    Ext.applyIf(this.initialConfig.ckEditorConfig,{
        resize_enabled:false,
        base_path:'ckeditor/',
        toolbarStartupExpanded:false,	
        shiftEnterMode:CKEDITOR.ENTER_P,
        skin:'office2003',
        extraPlugins:'codemirror'
    });

이런식으로 변경

setupCkEditor : function(){
	var editor = CKEDITOR.replace(this.inputEl.id, {
		resize_enabled:false,
		skin:'office2003'
	});

전체소스

Ext.define("Ext.ux.CKeditor",{
    extend:"Ext.form.field.TextArea",
    alias:'widget.ckeditor',
    ckEditorInstance : null,

    initComponent: function() {
        Ext.ux.CKeditor.superclass.initComponent.call(this, arguments);

        this.addEvents(
            /**
         * @event save
         * Fired when saving contents.
         * @param {Ext.ux.CKeditor} cKeditor This object
         * @param (contents) contents needing to be saved
         */
            'save'
            );
    },

    constructor : function(config){
        config = Ext.apply({
            grow:true,
            hideLabel:true
        },config);
        Ext.ux.CKeditor.superclass.constructor.call(this, config);
    },

    onRender : function(ct, position){
        Ext.ux.CKeditor.superclass.onRender.call(this, ct, position);
        this.setupCkEditor();
        //this.on('resize', this.textAreaResized, this);
    },

    setupCkEditor : function(){
        var editor = CKEDITOR.replace(this.inputEl.id, {
        	resize_enabled:false,
        	skin:'office2003'
        });
        
        console.debug(editor);        
        
        editor.extjsPanel = this;
        this.ckEditorInstance = editor;
        this.setValue(this.defaultValue);
    },

    textAreaResized : function(textarea, adjWidth, adjHeight){

        if(!this.ckEditorInstance)
        {
            if(!adjWidth && !adjHeight){
                var el = document.getElementById('cke_contents_' + this.inputEl.id);
                
                if(!(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);
    }
});