title: jQuery cleditor plugin: creating a new button
body: <p>Using <a href="http://premiumsoftware.net/cleditor/" rel="nofollow">cleditor</a>, I'm trying to set up a custom button with the following code:</p>
  
  <pre><code>(function($) {
      $.cleditor.buttons.link_species = {
          name: "link_species",
          image: "fish.gif",
          title: "Species Link",
          command: "inserthtml",
          popupName: "link_species",
          popupClass: "cleditorPrompt",
          popupContent: "Genus: &lt;input type='text' size='15'&gt; Species: &lt;input type='text' size='15'&gt;&lt;br /&gt;Remove italics? &lt;input type='checkbox' value='remove'&gt;&amp;nbsp;&lt;input type='button' value='Ok' /&gt;",
          buttonClick: link_speciesClick
      };
  
    // Handle the hello button click event
    function link_speciesClick(e, data) {
      // Wire up the submit button click event
      $(data.popup).children(":button")
        .unbind("click")
        .bind("click", function(e) {
  
          // Get the editor
          var editor = data.editor;
  
          var $text = $(data.popup).find(":text"),
            genus = $text[0].value,
            species = $text[1].value;
  
          var slug = genus + '-' + species;
          slug = htmlEntities(slug);
  
          var link = '/dev/species/' + slug + '/';
          var rel = link + '?preview=true';
  
          var display = firstUpper(genus) + ' ' + species;
  
          // Get the entered name
          var html = '&lt;a href="' + link + '" rel="' + rel + '"&gt;' + display + '&lt;/a&gt;';
  
          if ( !$(data.popup).find(":checkbox").is(':checked') ) {
              html = '&lt;em&gt;' + html + '&lt;/em&gt;';
          }
  
          // Insert some html into the document
          editor.execCommand(data.command, html, null, data.button);
  
          // Hide the popup and set focus back to the editor
          editor.hidePopups();
          editor.focus();
        });
    }
  })(jQuery);
  </code></pre>
  
  <p>It's a WordPress website, and the directory structure is something like this:</p>
  
  <p><code>/wp-content/plugins/sf-species-profile/cleditor</code></p>
  
  <p>Within there I have all the cleditor files and <code>config.js</code>.This file is where the above code is stored. </p>
  
  <p>I also have an <code>images</code> folder containing a 24*24 <code>fish.gif</code> file.</p>
  
  <p>For some reason, when I run this code, I get the following error:</p>
  
  <pre><code>[firefox]
  a is undefined
  &lt;&lt;myurl&gt;&gt;/wp-content/plugins/sf-species-profiles/cleditor/jquery.cleditor.min.js?ver=3.3.1
  Line 17
  
  [chrome]
  Uncaught TypeError: Cannot read property 'length' of undefined
  </code></pre>
  
  <p>If I change the "image" argument to image:"" the same image for "B" appears, but the plugin works without error.</p>
  
  <p>Does anyone have any ideas what may be wrong?</p>