ExtJS 5 component to hold CKEditor (web text editor) from http://ckeditor.com/

CKeditor.js

Ext.define('Ext.ux.CKeditor', {
    extend: 'Ext.form.field.TextArea',
    alias: 'widget.ckeditor',
    
    defaultListenerScope: true,
    
    listeners: {
      instanceReady: 'instanceReady',
      resize: 'resize',
      boxready : 'onBoxReady'
    },

    editorId: null,
    
    editor:null,
    CKConfig: {},

    constructor: function () {
        this.callParent(arguments);
    },

    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.editorId = this.inputEl.id;
            this.editor.name = this.name;

            this.editor.on("instanceReady", function (ev) {
                this.fireEvent(
                    "instanceReady",
                    this,
                    this.editor
                );
            }, this);

        }, this);
    },
    instanceReady : function (ev) {
        // Set read only to false to avoid issue when created into or as a child of a disabled component.
        ev.editor.setReadOnly(false);
    },
    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);
        }
    },

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

    destroy: function(){
        // delete instance
        if(!Ext.isEmpty(CKEDITOR.instances[this.editorId])){
            delete CKEDITOR.instances[this.editorId];
        }

    },

    resize: function(win,width, height,opt) {
        var eid = this.editorId,
            editor = CKEDITOR.instances[this.editorId];     
        if (!Ext.isEmpty(CKEDITOR.instances[this.editorId])){
            CKEDITOR.instances[this.editorId].resize(width, height);
        }       
    },
    onBoxReady : function(win, width, height, eOpts){
        // used to hook into the resize method
    }
});

hello any version to use in extjs 6 any help thank you very much :)

I have a couple of projects which I need to upgrade for ExtJS 6 so will let you know.

@jjab2020 Current work in progress building the component as a package, with promising results. https://github.com/RichardStyles/ExtJSCKEditor

hello, when I click "Templates" button and chose "Image and Title", then from general tab browse the image. It shows image there. But after save when I reload it is showing blank space instead. Am I missing any config setting? or anything?
I have noticed that the html it creates for image has src as blank.

I am trying to upgrade the ckeditor4 to Ckeditor5. Is this code working under the new CKEditor5?

Sorry @eemsong i’ve not used ExtJS now for several years. It’s not something I’d recommend.

Provided ExtJS hasn’t had a major rewrite since (no idea) it should be possible to modify this gist for it, I don’t see why not.

If I remember all this did was wrap the setup and scope/api of the ckeditor object, it’s likely the observer (load/destroy etc) functions may have changed either in ExtJS or ckeditor, ie any specific setup processes if this isn’t working.

I don’t have the ability to test this myself.