jQuery Spellchecker - jHtmlArea demo

This page shows how the spellchecker can be integrated into jHtmlArea editor:

Include the neccessary files:

<link rel="stylesheet" href="jhtmlarea/style/jHtmlArea.css" />
<link rel="stylesheet" href="jquery.spellchecker.css" />

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.spellchecker.js"></script>
<script src="jhtmlarea/scripts/jHtmlArea-0.7.5.js"></script>

Add the following CSS:

div.jHtmlArea .ToolBar ul li a.spellchecker-button-icon {
  background: transparent;
}

Init the jHtmlArea editor and the Spellchecker:

(function() {
  
  var element = $('#textarea-content');

  element.htmlarea({
    css: '../css/jquery.spellchecker.css',
    toolbar: [
      
      ["bold", "italic", "underline"],
      ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
      ["link", "unlink", "|", "image"],

      // custom spellcheck button
      [{
        css: "spellchecker-button-icon",
        text: "Check spelling",
        action: function(btn) {
          toggle();
        }
      }]
    ]
  });

  var body = element[0].jhtmlareaObject.editor.body;
  
  var toggle = (function() {
  
    var spellchecker = null;

    function create() {

      spellchecker = new $.SpellChecker(body, {
        lang: 'en',
        parser: 'html',
        webservice: {
          path: "../webservices/php/SpellChecker.php",
          driver: 'pspell'
        },
        suggestBox: {
          position: 'below'
        }
      });

      // Bind spellchecker handler functions
      spellchecker.on('check.success', function() {
        alert('There are no incorrectly spelt words.');
      });

      spellchecker.check();
    }

    function destroy() {
      spellchecker.destroy();
      spellchecker = null;
    }

    function toggle() {
      (!spellchecker) ? create() : destroy();
    }

    return toggle;
  })();
})();