Skip to content

Instantly share code, notes, and snippets.

@RichardStyles

RichardStyles/CKeditor.js

Last active Apr 19, 2018
Embed
What would you like to do?
ExtJS 5 component to hold CKEditor (web text editor) from http://ckeditor.com/
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
}
});
@jjab2020

This comment has been minimized.

Copy link

@jjab2020 jjab2020 commented Mar 26, 2016

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

@RichardStyles

This comment has been minimized.

Copy link
Owner Author

@RichardStyles RichardStyles commented Mar 30, 2016

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

@RichardStyles

This comment has been minimized.

Copy link
Owner Author

@RichardStyles RichardStyles commented Apr 1, 2016

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

@roohitgandhi

This comment has been minimized.

Copy link

@roohitgandhi roohitgandhi commented Apr 19, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment