title: ckeditor - javascriptspellcheck plugin
body: <p>I am trying to integrate <a href="http://www.javascriptspellcheck.com/HTML_Editor_SpellChecker_in_JavaScript" rel="nofollow">javascriptspellchecker</a> into a web page with <a href="http://docs.cksource.com/Main_Page" rel="nofollow">ckEditor</a> (note I am using ckeditor version 3.6). I would like to replace the default spellcheck and SCAYT (spell check as you type) plugins with new custom plugins that use javascriptspellcheck.</p>
  
  <p>I have created a plugin following the example from the javascriptspellchecker website but it doesn't work properly. The javascriptspellchecker taked the id of the textarea and runs a spellcheck on it's value (or attaches event handlers to spellcheck after input when chosing SCAYT). The problem is, when I alter the text in a ckEditor instance, the hidden textbox doesn't seem to be updated in the background. This means the plugin I have written only checks the original value of the textarea, and the SCAYT doesn't work.</p>
  
  <p>My plugin so far:-</p>
  
  <pre><code>(function () {
      //Section 1 : Code to execute when the toolbar button is pressed
      var a = {
          exec: function (editor) {
              $Spelling.SpellCheckInWindow($(editor.element).attr('id'))
          }
      },
  
      //Section 2 : Create the button and add the functionality to it
      b = 'javascriptspellcheck';
      CKEDITOR.plugins.add(b, {
          init: function (editor) {
              editor.addCommand(b, a);
              editor.ui.addButton("JavaScriptSpellCheck", {
                  label: 'Check Spelling',
                  icon: this.path + "images/spell.png",
                  command: b
              });
          }
      });
  })();
  </code></pre>
  
  <p>Does anyone know if it is possible to make a working plugin? Is there a way to force the editor to update the hidden textarea, or is there another DOM element I can pass to the spellchecker?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>In case it is useful, the SCAYT version of my plugin uses the following execute function</p>
  
  <pre><code>exec: function (editor) {
      $Spelling.SpellCheckAsYouType($(editor.element).attr('id'))
  }
  </code></pre>
  
  <p><strong>Update 2:</strong></p>
  
  <p>I found a soltion for the normal spell check, I can call editor.UpdateElement() before running the spell check and it works! I'm not sure why though, when I inspect the original textarea with firebug the value doesn't seem to have changed.</p>
  
  <p>New Spellcheck plugin</p>
  
  <pre><code>(function () {
      //Section 1 : Code to execute when the toolbar button is pressed
      var a = {
          exec: function (editor) {
              editor.updateElement();
              $Spelling.SpellCheckInWindow($(editor.element).attr('id'));
          }
      },
  
      //Section 2 : Create the button and add the functionality to it
      b = 'javascriptspellcheck';
      CKEDITOR.plugins.add(b, {
          init: function (editor) {
              editor.addCommand(b, a);
              editor.ui.addButton("JavaScriptSpellCheck", {
                  label: 'Check Spelling',
                  icon: this.path + "images/spell.png",
                  command: b
              });
          }
      });
  })();
  </code></pre>
  
  <p>I still can't get SCAYT to work though. I found a <a href="http://alfonsoml.blogspot.co.uk/2011/03/onchange-event-for-ckeditor.html" rel="nofollow">ckeditor plugin</a> to catch change events, and tried to call the updateElement() funciton again on every change. This doesn't work though, can anyone help?</p>
  
  <p>My SCAYT plugin using the ckeditor onchange plugin:</p>
  
  <pre><code>exec: function (editor) {
      editor.on('change', function (e) { this.updateElement(); });
      $Spelling.SpellCheckAsYouType($(editor.element).attr('id'));
  }
  </code></pre>