title: How show external toolbar programmatically
body: <p>I need to programmatically set the focus to an editor instance after initializing it.</p>
  <p>The box gets focus and you can start typing but the external toolbar is not shown unless you click in the editor frame.</p>
  <p>I tryed to change some css settings and the toolbar is shown but it disappear when clicking on editor frame.</p>
  <pre><code>var toolbar = $('#' + ed.id + '_external').hide().appendTo(&quot;#tiny_toolbar&quot;);
  toolbar.show();
  toolbar.css('top','50px');
  toolbar.css('display','block');
  $(&quot;.defaultSkin,.mceExternalToolbar&quot;).css(&quot;position&quot;,&quot;&quot;).css(&quot;z-index&quot;,&quot;1000&quot;);
  </code></pre>
  <p>Is there a way to simulate the editor click via js code so the toolbar would be displayed correctly?</p>
  <hr />
  <h3>Update:</h3>
  <p>No, I'm not wrong!
  The tiny iframe appear on different top,left of my text container.
  This code will explain better which is the problem.</p>
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/lib/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/lib/jquery-ui.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;js/lib/tiny/tiny_mce.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      
      function initTiny(){
      tinyMCE.init({
          language: false,
          mode: &quot;none&quot;,
          theme: &quot;advanced&quot;,
          dialog_type: &quot;modal&quot;,
          theme_advanced_buttons1: &quot;,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect&quot;,
          theme_advanced_toolbar_align: &quot;left&quot;,
          theme_advanced_statusbar_location: &quot;none&quot;,
          theme_advanced_path: &quot;none&quot;,
          theme_advanced_toolbar_location: &quot;external&quot;,
          setup: function (ed) {
              ed.onInit.add(function (ed) {
                  var visible = 1;
                  var tout = null;
                  var $toolbar = $('#' + ed.id + '_external');
      
      
      
                  $toolbar.css('top', '50px');
                  $toolbar.css('display', 'block');
                  $toolbar.hide();
                  $toolbar.show();
      
                  var show = function () {
                      tout &amp;&amp; clearTimeout(tout);
                      tout = setTimeout(function () {
                          tout = null;
                          $toolbar.css({
                              top: &quot;50px&quot;,
                              display: 'block'
                          });
                          visible = 1;
      
                      }, 250);
                  };
      
                  $(ed.getWin()).bind('click', function () {
                      if (ed.isHidden()) {
                          show();
                      }
                  });
              })
          }
      
      });
      }
      
      
      $(document).ready(function(){
          initTiny();
          $('#content3').click(function(){
              tinyMCE.execCommand(&quot;mceAddControl&quot;, false, 'content3');    
          });
          $('html').click(function(){
              tinyMCE.execCommand(&quot;mceRemoveControl&quot;, false, 'content3'); 
          });
          
      });
      
      &lt;/script&gt;
      &lt;/head&gt;
      
      
      &lt;body&gt;
          &lt;div id=&quot;tiny_toolbar&quot; class=&quot;defaultSkin&quot; style=&quot;position:relative;&quot;&gt; toolbar  &lt;/div&gt;
                  &lt;div id=&quot;content3&quot; style=&quot;top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;&quot;&gt;
                          &lt;p&gt;CONTENT 3!&lt;/p&gt;
                  &lt;/div&gt;
      &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  <hr />
  <p>No, I'm not wrong!
  The tiny iframe appear on different top,left of my text container.
  This code will explain better which is the problem.</p>
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/lib/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/lib/jquery-ui.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;js/lib/tiny/tiny_mce.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      
      function initTiny(){
      tinyMCE.init({
          language: false,
          mode: &quot;none&quot;,
          theme: &quot;advanced&quot;,
          dialog_type: &quot;modal&quot;,
          theme_advanced_buttons1: &quot;,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect&quot;,
          theme_advanced_toolbar_align: &quot;left&quot;,
          theme_advanced_statusbar_location: &quot;none&quot;,
          theme_advanced_path: &quot;none&quot;,
          theme_advanced_toolbar_location: &quot;external&quot;,
          setup: function (ed) {
              ed.onInit.add(function (ed) {
                  var visible = 1;
                  var tout = null;
                  var $toolbar = $('#' + ed.id + '_external');
      
      
      
                  $toolbar.css('top', '50px');
                  $toolbar.css('display', 'block');
                  $toolbar.hide();
                  $toolbar.show();
      
                  var show = function () {
                      tout &amp;&amp; clearTimeout(tout);
                      tout = setTimeout(function () {
                          tout = null;
                          $toolbar.css({
                              top: &quot;50px&quot;,
                              display: 'block'
                          });
                          visible = 1;
      
                      }, 250);
                  };
      
                  $(ed.getWin()).bind('click', function () {
                      if (ed.isHidden()) {
                          show();
                      }
                  });
              })
          }
      
      });
      }
      
      
      $(document).ready(function(){
          initTiny();
          $('#content3').click(function(){
              tinyMCE.execCommand(&quot;mceAddControl&quot;, false, 'content3');    
          });
          $('html').click(function(){
              tinyMCE.execCommand(&quot;mceRemoveControl&quot;, false, 'content3'); 
          });
          
      });
      
      &lt;/script&gt;
      &lt;/head&gt;
      
      
      &lt;body&gt;
          &lt;div id=&quot;tiny_toolbar&quot; class=&quot;defaultSkin&quot; style=&quot;position:relative;&quot;&gt; toolbar  &lt;/div&gt;
                  &lt;div id=&quot;content3&quot; style=&quot;top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;&quot;&gt;
                          &lt;p&gt;CONTENT 3!&lt;/p&gt;
                  &lt;/div&gt;
      &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>