CKEditor Uncaught TypeError: cannot call the 'unselectable' of null method in a single page EmberJS application with multiple editors

Question

I have a single page application created using EmberJS.

I have 3 text fields per page.

I pass ckeditor after textarea has been inserted into dom, and I mark the property on the controller entry that ckeditor has been processed, so I do not do it more than once.

I even look in dom to make sure there is no editor.

When I refresh the page, I get this error at random:

Uncaught TypeError: Cannot call method 'unselectable' of null 

I do not know what causes it or now to prevent it. When this does not cause this error, all 3 ckeditors look just fine.

Here is my intiation code for the editor:

 Lrt.PrioritizationEditableTextArea = Ember.TextArea.extend({ areaVisible: false, isRendered: false, isInserted: false, didInsertElement:function(){ this.set('isInserted', true); }, renderEditor:function(){ var self = this; var selfID = self.get('elementId'); if( !this.get('isRendered') && this.get('isInserted') && $('#'+selfID).parent().find('cke').length === 0 ){ var editor = $('#'+selfID).ckeditor({ toolbar:[ { name: 'document', items:['Source'] }, { name: 'clipboard', items:['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']}, { name: 'editing', items:['scayt']}, { name: 'basicstyles', items:['Bold', 'Italic', 'Underline', 'TextColor', 'BGColor', '-', 'RemoveFormat']}, { name: 'styles', items:['FontSize']}, { name: 'paragraph', items:['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-']} ] }).editor; editor.on('change', function(e){ if(e.editor.checkDirty()){ self.set('value', editor.getData()); } }); this.set('isRendered', true); } }.observes('areaVisible') }); 

I also use the onChange plugin for ckeditor to disable the onChange event when something changes in the editor and I respond to it.

What I tried:

• uninstall onChange plugin
• change ckeditor to beta version 4.3
• delete toolbar settings
• delete onChange event listener
• make sure all text areas have content in them when rendering

What do I need to do to fix this?

EDIT

Here's the stack trace: (I snap to the ver line in my application)

 a (ckeditor.js?ver=2.0.0:291) (anonymous function) (ckeditor.js?ver=2.0.0:287) i (ckeditor.js?ver=2.0.0:10) CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?ver=2.0.0:12) CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js?ver=2.0.0:13) CKEDITOR.event.CKEDITOR.event.fireOnce (ckeditor.js?ver=2.0.0:12) CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js?ver=2.0.0:13) (anonymous function) (ckeditor.js?ver=2.0.0:223) m (ckeditor.js?ver=2.0.0:203) CKEDITOR.scriptLoader.load (ckeditor.js?ver=2.0.0:203) (anonymous function) (ckeditor.js?ver=2.0.0:222) (anonymous function) (ckeditor.js?ver=2.0.0:210) (anonymous function) (ckeditor.js?ver=2.0.0:208) m (ckeditor.js?ver=2.0.0:203) CKEDITOR.scriptLoader.load (ckeditor.js?ver=2.0.0:203) CKEDITOR.resourceManager.load (ckeditor.js?ver=2.0.0:207) h (ckeditor.js?ver=2.0.0:209) (anonymous function) (ckeditor.js?ver=2.0.0:210) m (ckeditor.js?ver=2.0.0:220) (anonymous function) (ckeditor.js?ver=2.0.0:220) (anonymous function) (ckeditor.js?ver=2.0.0:397) (anonymous function) (ckeditor.js?ver=2.0.0:208) m (ckeditor.js?ver=2.0.0:203) q (ckeditor.js?ver=2.0.0:203) r (ckeditor.js?ver=2.0.0:203) (anonymous function) (ckeditor.js?ver=2.0.0:204) 

EDIT # 2:

Here is the script for the specific application area in which the problem occurs: http://jsfiddle.net/sSaCd/3/

Answer 1

I had a similar problem with AngularJS and jQuery UI Sortable with several CKEditors per page. This is essentially a nightmare installation. Not sure if this is even completely related, but I figured I would share anyway if anyone else runs into this problem. It seems like a bug in CKEditor ( http://dev.ckeditor.com/ticket/11924 ?) Is more than anything else.

Whenever the DOM is changed by sorting, I have callbacks that destroy / recreate CKE (long story).

I called CKEDITOR.remove(ckInstance) , which led to the same error you were getting.

I also tried calling with calls to ckInstance.destroy() and ckInstance.destroy(true) (to avoid updating the DOM that was already changed) in my callback, but I got the Cannot read property 'hasAttribute' of undefined error (as well as Cannot read property 'clearCustomData' of null somewhere along the line).

I was able to solve this problem as follows:

ckInstance.removeAllListeners(); CKEDITOR.remove(ckInstance);

CKEditor seems to be doing a terrible job of cleaning up after itself and handling DOM changes is incredibly bad (not to mention Angular ...)

Hope this saves someone else the ridiculous amount of time it took me to figure out :)

Answer 2

I had the same problem using Meteor and with multiple instances of ckeditor. This is a common DOM reactive loading problem in which your application processed your javaScript calls in the order in which they were received, but the DOM cannot be fully loaded.

To solve this problem, I just block the code with setTimeout .

 setTimeout(function(){ $('#content-area').ckeditor(); },100); 

Answer 3

I just edited a mini file (leaving notes in a text file for developers) and just changed where the error occurred to check the null value from

 &&a.ui.space("top").unselectable(); 

to

 &&a.ui.space("top")!=null&&a.ui.space("top").unselectable(); 

I did this in two places.

Answer 4

Try calling ck_editor.destroy where ck_editor is your instance of your editor. For some reason, CKEDITOR seems to be based on older instances. If you destroy them, the error seems to disappear.

 MyView: Ember.View.extend # Hang on to the reference for your editor didInsertElement: -> @set('ck_editor', CKEDITOR.replace('whatever')) # Tear down your instanc willDestroyElement: -> if @get('ck_editor') @get('ck_editor').destroy() 

Answer 5

I put the line CKEDITOR.replace in a function, and when I loaded the body, I called the function .

I encountered the same problem in Laravel. Javascript CKEDITOR.replace worked until the page was fully loaded, which caused this error.

to make sure that the page is fully loaded, I placed the line CKEDITOR.replace inside the function, and when the body loaded, I called the function