jQuery Spellchecker - MarkItUp demo

Include the neccessary files:

<link rel="stylesheet" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" href="markitup/sets/default/style.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="markitup/jquery.markitup.js"></script>
<script src="markitup/sets/default/set.js"></script>

Add the following CSS:

.markItUp .spellchecker-button-icon {
  background-position: top center;
}
.markItUp .spellchecker-button-icon a {
  background: none;
}

Add a spellchecker button to the toolbar and init the spellchecker:

(function() {

  var spellchecker;

  var settings = {
     onShiftEnter: {
      keepDefault: false,
      replaceWith: '<br />\n'
     },
     onCtrlEnter: {
      keepDefault: false,
      openWith: '\n<p>',
      closeWith: '</p>'
     },
     onTab: {
      keepDefault: false,
      replaceWith: '    '
     },
     markupSet: [{
      name: 'Bold',
      key: 'B',
      openWith: '(!(<strong>|!|<b>)!)',
      closeWith: '(!(</strong>|!|</b>!)'
     }, {
      name: 'Italic',
      key: 'I',
      openWith: '(!(<em>|!|<i>)!)',
      closeWith: '(!(</em>|!|</i>)!)'
     }, {
      name: 'Stroke through',
      key: 'S',
      openWith: '<del>',
      closeWith: '</del>'
     }, {
      separator: '---------------'
     }, {
      name: 'Picture',
      key: 'P',
      replaceWith: '<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />'
     }, {
      name: 'Link',
      key: 'L',
      openWith: '<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>',
      closeWith: '</a>',
      placeHolder: 'Your text to link...'
     }, {
      separator: '---------------'
     }, {
      name: 'Clean',
      className: 'clean',
      replaceWith: function (markitup) {
        return markitup.selection.replace(/<(.*?)>/g, "")
      }
     }, {
      name: 'Spellcheck',
      className: 'spellchecker-button-icon',
      beforeInsert: function (markitup) {
        SpellChecker(markitup, "en");
      }
    }]
  };

  $('.textarea').markItUp(settings);

  function SpellChecker(markitup, lang){

    if (!spellchecker) {

      spellchecker = new $.SpellChecker(markitup.textarea, {
        lang: 'en',
        parser: 'text',
        webservice: {
          path: '../webservices/php/SpellChecker.php',
          driver: 'PSpell'
        },
        suggestBox: {
          position: 'above'
        },
        incorrectWords: {
          container: '#incorrect-word-list'
        }
      });

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