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. 「SETUP」機能で、「ぼかし」イベントの伝播を防ぎました。

これは私にとってはうまくいくように見えましたが、ぼかしのデフォルトの動作を防ぐことが悪影響を与えるかどうかは完全にはわかりません. 何か見つけたら、この記事を更新します。

お役に立てれば。:)

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