title: Adding a custom button to TinyMCE
body: <p>Have been trying to add a custom button for about 2 hours and I just can't get it to work. I don't know much about javascript maybe that's why. I did manage to get the button to show up and open a popup, but that's as far as I got.</p>
  
  <p>I want the button to insert t he following into the HTML section of tinymce:</p>
  
  <p>'</p>
  
  <p>Here is my dialog.js file:</p>
  
  <pre><code>tinyMCEPopup.requireLangPack();
  
  var InsertQuoteDialog = {
      init: function () {
          var s = tinyMCEPopup.editor.selection.getContent({ format: 'text' });
          if (s.trim().length &gt; 0) {
              document.forms[0].blizzQuote.value = s.trim();
          }
      },
  
      insert: function () {
          var s1 = '&lt;p class="blizzardQuote" ';
          s1 += Encoder.htmlEncode(document.forms[0].blizzQuote.value.trim()) + '&lt;/p&gt;';
  
          tinyMCEPopup.editor.execCommand('mceInsertContent', false, s1);
          tinyMCEPopup.close();
      }
  };
  
  String.prototype.trim = function () {
      return this.replace(/^\s*/, "").replace(/\s*$/, "");
  }
  
  tinyMCEPopup.onInit.add(InsertQuoteDialog.init, InsertQuoteDialog);
  </code></pre>
  
  <p>And my Dialog.htm file:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;{#example_dlg.title}&lt;/title&gt;
      &lt;script type="text/javascript" src="../../tiny_mce_popup.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/dialog.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form onsubmit="InsertQuoteDialog.insert();return false;" action="#"&gt;
      &lt;p&gt;Blizzard Quote&lt;/p&gt;
      &lt;p&gt;Blizzard Quote: &lt;input id="blizzQuote" name="blizzQuote" type="text" class="text" /&gt;&lt;/p&gt;
  
      &lt;div class="mceActionPanel"&gt;
      &lt;div style="float: left"&gt;
          &lt;input type="button" id="insert" name="insert" value="{#insert}" onclick="InsertQuoteDialog.insert();" /&gt;
      &lt;/div&gt;
      &lt;div style="float: right"&gt;
          &lt;input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically when I click on insert nothing happens.</p>
  
  <p>Thanks.</p>