ExtJS4整合CKEditor4.3

最新推荐文章于 2025-03-08 12:30:56 发布

原创最新推荐文章于 2025-03-08 12:30:56 发布 · 2.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #ckeditor

javascript 专栏收录该内容

6 篇文章

订阅专栏

在使用ExtJS中的项目中可能会使用到富文本编辑器，但ExtJS4中提供的HtmlEditor功能不强，而且在IE下兼容性不好，所以就想把CKEditor整合进ExtJS中，下面是整合源码：

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

    constructor : function() {
    	this.callParent(arguments);//必须先构造父类对象
    	this.addEvents("instanceReady");//注册一个instanceReady事件
    },
    
    initComponent: function () {
        this.callParent(arguments);
        this.on("afterrender", function(){
            Ext.apply(this.CKConfig, {
               height : this.getHeight(),
               width : this.getWidth()
            });
            this.editor = CKEDITOR.replace(this.inputEl.id, this.CKConfig);
            this.editor.name = this.name;//把配置中的name属性赋值给CKEditor的name属性
            this.editor.on("instanceReady", function(){
                this.fireEvent("instanceReady", this, this.editor);//触发instanceReady事件
            }, this);
        }, this);
    },
    onRender: function (ct, position) {
        if (!this.el) {
            this.defaultAutoCreate = {
                tag: 'textarea',
                autocomplete: 'off'
            };
        }
        this.callParent(arguments)
    },
    setValue: function (value) {
        this.callParent(arguments);
        if (this.editor) {
            this.editor.setData(value);
        }
    },
    getRawValue: function () {//要覆盖getRawValue方法，否则会取不到值
        if (this.editor) {
            return this.editor.getData();
        } else {
            return ''
        }
    },
    getValue: function () {
        return this.getRawValue();
    }
});

主要是setValue与getValue方法，还有就是注册事件用于监听CKEditor的状态，上面注册的是instanceReady事件，其它事件同理。