Home/ Questions/Q 8421811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T03:15:10+00:00

I need to programmatically set the focus to an editor instance after initializing it.

  • 0

I need to programmatically set the focus to an editor instance after initializing it.

The box gets focus and you can start typing but the external toolbar is not shown unless you click in the editor frame.

I tryed to change some css settings and the toolbar is shown but it disappear when clicking on editor frame.

var toolbar = $('#' + ed.id + '_external').hide().appendTo("#tiny_toolbar");
toolbar.show();
toolbar.css('top','50px');
toolbar.css('display','block');
$(".defaultSkin,.mceExternalToolbar").css("position","").css("z-index","1000");

Is there a way to simulate the editor click via js code so the toolbar would be displayed correctly?

Update:

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.

    <html>
    <head>
        
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.js"></script>
    <script src="js/lib/tiny/tiny_mce.js"></script>
    <script type="text/javascript">
    
    function initTiny(){
    tinyMCE.init({
        language: false,
        mode: "none",
        theme: "advanced",
        dialog_type: "modal",
        theme_advanced_buttons1: ",bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "none",
        theme_advanced_path: "none",
        theme_advanced_toolbar_location: "external",
        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 && clearTimeout(tout);
                    tout = setTimeout(function () {
                        tout = null;
                        $toolbar.css({
                            top: "50px",
                            display: 'block'
                        });
                        visible = 1;
    
                    }, 250);
                };
    
                $(ed.getWin()).bind('click', function () {
                    if (ed.isHidden()) {
                        show();
                    }
                });
            })
        }
    
    });
    }
    
    
    $(document).ready(function(){
        initTiny();
        $('#content3').click(function(){
            tinyMCE.execCommand("mceAddControl", false, 'content3');    
        });
        $('html').click(function(){
            tinyMCE.execCommand("mceRemoveControl", false, 'content3'); 
        });
        
    });
    
    </script>
    </head>
    
    
    <body>
        <div id="tiny_toolbar" class="defaultSkin" style="position:relative;"> toolbar  </div>
                <div id="content3" style="top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;">
                        <p>CONTENT 3!</p>
                </div>
    </body>
        </html>

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.

    <html>
    <head>
        
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.js"></script>
    <script src="js/lib/tiny/tiny_mce.js"></script>
    <script type="text/javascript">
    
    function initTiny(){
    tinyMCE.init({
        language: false,
        mode: "none",
        theme: "advanced",
        dialog_type: "modal",
        theme_advanced_buttons1: ",bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "none",
        theme_advanced_path: "none",
        theme_advanced_toolbar_location: "external",
        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 && clearTimeout(tout);
                    tout = setTimeout(function () {
                        tout = null;
                        $toolbar.css({
                            top: "50px",
                            display: 'block'
                        });
                        visible = 1;
    
                    }, 250);
                };
    
                $(ed.getWin()).bind('click', function () {
                    if (ed.isHidden()) {
                        show();
                    }
                });
            })
        }
    
    });
    }
    
    
    $(document).ready(function(){
        initTiny();
        $('#content3').click(function(){
            tinyMCE.execCommand("mceAddControl", false, 'content3');    
        });
        $('html').click(function(){
            tinyMCE.execCommand("mceRemoveControl", false, 'content3'); 
        });
        
    });
    
    </script>
    </head>
    
    
    <body>
        <div id="tiny_toolbar" class="defaultSkin" style="position:relative;"> toolbar  </div>
                <div id="content3" style="top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;">
                        <p>CONTENT 3!</p>
                </div>
    </body>
        </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your tinymce init use

       ...
   theme_advanced_toolbar_location: "external",
   setup : function(ed) {
        ed.onInit.add(function(ed, evt) {
            var $toolbar = $('#'+ed.id + '_external');
                        $toolbar.css('top','50px');
                        $toolbar.css('display','block');
                        $toolbar.hide();
                        $toolbar.show();

        });
    });

    You should also use a timeout to call the following functions (i.e. show() onclick)

            var visible = 1;
        var tout = null;

        var show = function() {
            tout && clearTimeout(tout);
            tout = setTimeout(function() {
                tout = null;
                $toolbar.css({ top : $window.scrollTop(), display : 'block' });
                visible = 1;    
            }, 250);
        };

        var hide = function() {
            if (!visible) { return; }
            visible = 0;
            $toolbar.hide();
        };

        $(ed.getWin()).bind('click', function() {
            show();
        });
    • 0