title: Plugin for CKeditor to add multiple styles
body: <p><a href="https://stackoverflow.com/questions/7676144/ckeditor-format-class">Codewaggle's answer</a> here got me started and I also have looked at <a href="https://stackoverflow.com/questions/12787891/ckeditor-plugin-to-set-classes">Reinmar's answer</a>, but I can't quite put this together. </p>
  
  <p>I want to create a plugin with five custom spans (correction, deletion, suggestion...etc.) that I can then add to my CSS and have a button to apply each style using CKeditor in Drupal 7. </p>
  
  <p>I don't want to use the drop-down for styles and prefer to have buttons with icons for each class added. </p>
  
  <p>I used the basicstyles plugin as a jumping off point, but I have never done anything in javascript before so I am really in the dark. </p>
  
  <p>I have added </p>
  
  <pre><code>config.extraPlugins = 'poligoeditstyles';
  </code></pre>
  
  <p>to the config file and set up the file structure of my plugin according to the guide on the CKeditor.</p>
  
  <p>I assume that if all has gone according to plan I should see a button to drag into my toolbar, but, alas! No joy. I can see nothing added to my CKeditor toolbar when I add content or on the configuration page in Drupal:</p>
  
  <pre><code>admin/config/content/ckeditor/edit/Advanced
  </code></pre>
  
  <p>Am I missing something? Any help would be appreciated!</p>
  
  <p>Here's my plugin code:</p>
  
  <pre><code>/**
   * POLIGO edit styles plug-in for CKeditor based on the Basic Styles plugin
   */
  
  CKEDITOR.plugins.add( 'poligoeditstyles', {
      icons: 'correction,suggestion,deletion,commendation,dontunderstand', // %REMOVE_LINE_CORE%
      init: function( editor ) {
          var order = 0;
          // All buttons use the same code to register. So, to avoid
          // duplications, let's use this tool function.
          var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) {
                  // Disable the command if no definition is configured.
                  if ( !styleDefiniton )
                      return;
  
                  var style = new CKEDITOR.style( styleDefiniton );
  
                  // Listen to contextual style activation.
                  editor.attachStyleStateChange( style, function( state ) {
                      !editor.readOnly &amp;&amp; editor.getCommand( commandName ).setState( state );
                  });
  
                  // Create the command that can be used to apply the style.
                  editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
  
                  // Register the button, if the button plugin is loaded.
                  if ( editor.ui.addButton ) {
                      editor.ui.addButton( buttonName, {
                          label: buttonLabel,
                          command: commandName,
                          toolbar: 'poligoeditstyles,' + ( order += 10 )
                      });
                  }
              };
  
          var config = editor.config,
              lang = editor.lang;
  
          addButtonCommand( 'Correction', 'That's a mistake', 'correction', config.coreStyles_correction );
          addButtonCommand( 'Suggestion', 'That's OK, but I suggest...', 'suggestion', config.coreStyles_suggestion );
          addButtonCommand( 'Deletion', 'You don't need that', 'deletion', config.coreStyles_deletion );
          addButtonCommand( 'Commendation', 'Great job!', 'commendation', config.coreStyles_commendation );
          addButtonCommand( 'Dontunderstand', 'I don't understand what you mean', 'dontunderstand', config.coreStyles_dontunderstand );
  
      }
  });
  
  // POLIGO Editor Inline Styles.
  
  CKEDITOR.config.coreStyles_correction = { element : 'span', attributes : { 'class': 'correction' }};
  CKEDITOR.config.coreStyles_suggestion = { element : 'span', attributes : { 'class': 'suggestion' }};
  CKEDITOR.config.coreStyles_deletion = { element : 'span', attributes : { 'class': 'deletion' }};
  CKEDITOR.config.coreStyles_commendation = { element : 'span', attributes : { 'class': 'commendation' }};
  CKEDITOR.config.coreStyles_dontunderstand = { element : 'span', attributes : { 'class': 'dontunderstand' }};
  </code></pre>