CKeditor SIMPLY DOES NOT WORK WITH WEBIX.

Webix JS
1

Cleanest looking editor but unfortunately a no go with Webix.

Sure the component shows on screen once but the moment you resize the browser or you hide() and then show() the Webix component, CKeditor breaks. The following error is thrown in CKeditor codebase whenever the Webix component show() is called and a user clicks in the CKeditor to gain focus. Resizing window also causes CKeditor to break.

Following the example here http://docs.webix.com/desktop__text_editors.html
does not show the CKeditor component just a textArea.

In order to show the CKeditor in our app we had to set the window.CKEDITOR_BASEPATH in our index.html and include ckeditor/ckeditor.js as well although the webix CKeditor.js file sets and requires this information in its _init_ckeditor_once() function. (this file shouldn’t be called CKeditor BTW, very confusing. It should be called WebixCKeditor.js etc.

CKEDITOR.dom.selection = function(a) {
var b = a instanceof CKEDITOR.dom.element;
this.document = a instanceof CKEDITOR.dom.document ? a : a.getDocument();
this.root = a = b ? a : this.document.getBody();
this.isLocked = 0;
this._ = {
cache: {}
};
b = q ? this.document.$.selection : this.document.getWindow().$.getSelection();<----- STOPS

[Error] TypeError: undefined is not an object (evaluating ‘this.document.getWindow().$.frameElement’) <----- STOPS
resize (ckeditor.js:293:528)
_set_inner_size (ckeditor.js:30)
$setSize (ckeditor.js:35)
rc (webix.js:222:152)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
rc (webix.js:222:304)
rc (webix.js:227:280)
$setSize (webix.js:227:104)
adjust (webix.js:201)
(anonymous function) (EsqUI_Desktop.js:57)

The example Webix code also breaks. Resize or switch tab views and watch top CKeditor revert back to textArea. Intermittently breaks so you have to try more then once to break it. http://docs.webix.com/samples/32_thirdparty/15_ckeditor.html

2

If you hide and show the view, where CKEditor was initialized, it will be broken for sure. As CKEditor relay on iframes, and they will broke on view hiding.

Also, if you are using the CKEditor as part of tabview / multiview, be sure to set keepViews property

view: "tabview",
multiview:{ keepViews:true },
cells:[{
3

the only real solution is to destroy CKeditor instance and instantiate a new one overtime. It can’t be hidden or moved via addView otherwise it breaks.

4

thank you.