CODEWITHSUNDEEP
tinymce
bronzett
bronzett

Reputation: 25

How show external toolbar programmatically

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>

Upvotes: 2

Views: 2669

Answers (2)

Rohit L
Rohit L

Reputation: 1551

I'm using TinyMCE 4 and I needed an external Toolbar with my app.

I initially only set the "fixed_toolbar_container" and the "inline" properties but my toolbar kept on disappearing when my editor text area was not in focus.

So, in the INIT I changed the following:

  1. In the "INIT" I set "inline" to "true" and "fixed_toolbar_container" to the selector for my external toolbar div.
  2. In the "SETUP" function I prevented the propagation of the "blur" event.

This seemed to work for me but I'm not entirely sure if preventing the default behavior on blur will have any adverse consequences. I'll update this post if I find something.

Hope this helps. :)

tinyMCE.init({
            ...

            inline: true,
            fixed_toolbar_container: "div#ToolBar",

            // Set the mode & plugins
            nowrap: false,
            statusbar: true,
            browser_spellcheck: true,
            resize: true,

           ...

            setup: function (editor) {
                // Custom Blur Event to stop hiding the toolbar
                editor.on('blur', function (e) {
                   e.stopImmediatePropagation();
                   e.preventDefault();
                });
            }
        })

Upvotes: 1

Thariama
Thariama

Reputation: 50832

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();
        });

Upvotes: 0

Related Questions