Question

我需要在初始化之后以编程方式将焦点设置为编辑器实例。

该框获得焦点，您可以开始输入，但除非您在编辑器框架中单击，否则不会显示外部工具栏。

我尝试更改某些css设置并显示工具栏，但在单击编辑器框架时它会消失。

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");

有没有办法通过js代码模拟编辑器点击，这样工具栏才能正确显示？

更新

不，我没错！微小的iframe出现在我的文本容器的左上方。这段代码将更好地解释哪个是问题。

    <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>

不，我没错！微小的iframe出现在我的文本容器的左上方。这段代码将更好地解释哪个是问题。

    <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>

Answer 1

我正在使用TinyMCE 4，我的应用程序需要一个外部工具栏。

我最初只设置了“fixed_toolbar_container”和“inline”属性，但当我的编辑器文本区域没有聚焦时，我的工具栏一直在消失。

所以，在INIT我更改了以下内容：

在“INIT”中，我将“inline”设置为“true”，将“fixed_toolbar_container”设置为我的外部工具栏div的选择器。
在“设置”功能中，我阻止了“模糊”事件的传播。

这似乎对我有用，但我不完全确定是否防止模糊的默认行为会产生任何不良后果。如果我找到了什么，我会更新这篇文章。

希望这会有所帮助。：）

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

Answer 2

在你的tinymce init中使用

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

        });
    });

您还应该使用超时来调用以下函数（即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();
        });

如何以编程方式显示外部工具栏

更新

2 个答案: