title: CKEditor Uncaught TypeError: Cannot call method 'unselectable' of null in EmberJS single page app with multiple editors
body: <p>I have a single page app created using EmberJS. </p>
  
  <p>I have 3 textareas on the page. </p>
  
  <p>I am rendering the ckeditor once the textarea has been inserted into the dom and I am flagging a property on the controller recording that the ckeditor has been rendered so that I'm not rendering it more than once.</p>
  
  <p>I'm even looking into the dom to verify that there isn't currently an editor there.</p>
  
  <p>When refreshing the page, I am getting this error at random:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'unselectable' of null
  </code></pre>
  
  <p>I do not know what's causing it or now to prevent it. When it doesn't throw that error, all 3 ckeditors appear just fine.</p>
  
  <p>Here is my intiation code for the editor:</p>
  
  <pre><code>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') &amp;&amp; this.get('isInserted') &amp;&amp; $('#'+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')
  });
  </code></pre>
  
  <p>I am also using the "onChange" plugin for ckeditor to fire off an "onChange" event when anything changes in the editor and am responding to it.</p>
  
  <p><strong>What I have tried:</strong></p>
  
  <ul>
  <li>removing the onChange plugin</li>
  <li>changing ckeditor to the 4.3 beta version</li>
  <li>removing the toolbar customizations</li>
  <li>removing the onChange event listener</li>
  <li>verify that all textareas have content in them when render</li>
  </ul>
  
  <p>What do I need to do to fix this?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here's the stack trace: (I'm tacking on the ver string in my app)</p>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>EDIT #2:</strong></p>
  
  <p>Here is a fiddle of the specific area of the application where the issue is occuring:
  <a href="http://jsfiddle.net/sSaCd/3/">http://jsfiddle.net/sSaCd/3/</a></p>