jQuery Spellchecker - Redactor demo

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

Include the neccessary files:

<link rel="stylesheet" href="redactor/redactor.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="redactor/redactor.min.js"></script>

Add the following CSS:

.redactor_toolbar li a.redactor_btn_spellchecker {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHtSURBVDjLY/j//z8DJZiBKgY49drM9J3idhLEtu+xjvea4nLNqsVspnWr2S6QmF6+Zol2ltpq5QSlmcpxijMxDABp9pjkuMuu28rIpsMi3rLZFKzIus38mm6OuqRxpf41nC5w7rOJd+i1ngnUXGLTbj7Tsskk3rbL8ppZreEu7Ry1mWpJSvHK8Uoz0TWK5U/nYIg8y8rgPsl+l12P1WqgbTPdJtk/AtoWb1CkBdagnqyyWilawVM/Rw/FBQyx540ZGm/eYIg8P43BdYLdSZiEcYXeTJB/TaoNroH8q5OldVIhXE5SKUqhXSNRfZdKvPKVkOrED+L9d/8wN998w+B4XIL40I48K8FQf/O6+7In/7mbb35hsD2qjBKNDLU3ExjKb7pi1Rx61ke89+6fwBVP/jPXXn/HYHlYGiMdMJTe1JJc/PgHQ/X1xQyplznBYuFnmRiiz062nPfof8DSJ/8ZSq8/ZzA9KIEzIQE1Vvuuf/6fufv2M4bgsz4MxVdPui8Cal4C1Jx/+RGDPqpmTANiz7MAvXI+bO2L/5ZzHvzP2Pjif8DCx/8ZMi/fY9DcL0FUUmbwPKkg3Hr7T+WOV//95j/8z5B6/jaD6l4JkvIC0J9FTtPu/2dIPn+PQXG3BFmZiUFzbweDLH7NVMmNAOGld33BRiNUAAAAAElFTkSuQmCC) !important;
  background-repeat: no-repeat;
  background-position: center center;
}

Create the spellchecker plugin and init the Reactor editor:

(function() {
  
  if (typeof window.RedactorPlugins === 'undefined') window.RedactorPlugins = {};
   
  window.RedactorPlugins.spellchecker = {
    init: function() {
      
      this.addBtn('spellchecker', 'Spellchecker', function(obj) {
        obj.toggle();
      });
    },
    create: function() {

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

      // Bind spellchecker handler functions
      this.spellchecker.on('check.success', function() {
        alert('There are no incorrectly spelt words.');
      });
    },
    toggle: function() {
      if (!this.spellchecker) {
        this.setBtnActive('spellchecker');
        this.create();
        this.spellchecker.check();
      } else {
        this.setBtnInactive('spellchecker');
        this.spellchecker.destroy();
        this.spellchecker = null;
      }
    }
  };
  
  // Init redactor
  $('.textarea').redactor({ 
    plugins: ['spellchecker']
  });

})();