日期:2014-05-16  浏览次数:20402 次

extjs4与FCKeditor整合
   EXTJS4与FCKeditor整合:
  1.自定义CKeditor控件,继承自textArea

Ext.define('Ext.ux.form.CkEditor', {

    extend: 'Ext.form.field.TextArea',

    alias: 'widget.ckeditor',

    onRender : function(ct, position){
        if(!this.el){
            this.defaultAutoCreate = {
                tag: "textarea",
                autocomplete: "off"
            };
        }
        this.callParent(arguments);
        this.editor = CKEDITOR.replace(this.inputEl.id, this.CKConfig);
    },

    setValue: function(value) {
        if(this.editor){
            this.editor.setData(value);
        }
        this.callParent(arguments);
    },

    getValue: function() {
        if (this.editor) {
            this.editor.updateElement();
            return this.editor.getData();
        } else {
            return '';
        }
    },

    getRawValue: function() {
        if (this.editor) {
            this.editor.updateElement();
            return this.editor.getData();
        } else {
            return '';
        }
    }
});


2,像其他控件一样使用
var items = [
            hiddenId,
            {
                xtype:'textfield',
                name:'title',
                layout:'form',
                fieldLabel:'title',
                labelWidth:50,
                columnWidth:.2,
                labelAlign:'right'
            },
            {
                xtype: 'ckeditor',
                fieldLabel: 'content',
                labelAlign: 'left',
                name: 'content',
                allowBlank: true,
                CKConfig: {
                    height: '300',
                    //如果选择字体样式等的弹出窗口被当前window挡住,就设置这个为一个较大的值
                    baseFloatZIndex: 99999,
                    //图片和flash都上传到这里
                    filebrowserUploadUrl: '/upload'
                }
            }
        ];

3,取值和以前一样取法,request.getPrameter("content");
   设置值也和其他的一样,
        this.down('ckeditor').setValue(jsonObj.content);