2

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

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

我尝试更改一些 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>
4

2 回答 2

1

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

我最初只设置了“fixed_toolbar_container”和“inline”属性，但是当我的编辑器文本区域不在焦点上时，我的工具栏不断消失。

因此，在 INIT 中，我更改了以下内容：

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

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

希望这可以帮助。:)

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();
                });
            }
        })
于 2014-01-15T05:50:07.000 回答
0

在您的 tinymce 初始化中使用

   ...
   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();
        });
于 2012-08-20T12:08:17.130 回答