0

jQueryUI のツールチップを TinyMCE エディタの要素に適用したいのですが、FF を使用すると表示されず、IE と Chrome を使用するとバグがあります。iframe 内の要素に jQueryUI のツールチップを適用して実験したところ、同様の結果が得られました。私のスクリプトは以下にあり、デモはhttp://jsbin.com/abEkOnO/1/にあります (jsbin を使用するとプロキシ エラーが発生するため、iframe JS を無効にする必要があることに注意してください)。ツールチップが作成されていると思いますが、CSS はドキュメントではなく iframe に関連している可能性があります。また、独自のツールチップ プラグイン ( http://jsbin.com/AzaKARe/1/ ) を作成して実験しましたが、ファンキーな結果も得られます。

TinyMCE エディターで要素のツールチップを使用するにはどうすればよいですか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>IFrame and tooltips</title>

        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
        <script type="text/javascript"> 

            tinymce.init({'selector': "#tinymce"});

            $(document).ready(function(){

                $('.tooltip').tooltip();
                $('#click').click(function(){

                    console.log($('#iframeID').contents().find('.tooltip'));
                    $('#iframeID').contents().find('.tooltip').tooltip();

                    $('#tinymce').html('<div class="tooltip" title="Some Div4">Some DIV4</div><div class="tooltip" title="Some Div5">Some DIV5</div><div class="tooltip" title="Some Div6">Some DIV6</div>');
                    var t=tinymce.editors['tinymce'];
                    t.load();
                    console.log($(t.getBody()).find('div.tooltip'));
                    $(t.getBody()).find('div.tooltip').tooltip();
                });

            });
        </script>

    </head>
    <body>
    <button id='click'>Click</button>
    <iframe src="iframe_page1.html" id="iframeID"></iframe>
    <div class="tooltip" title="Some Div1">Some DIV1</div>
    <div class="tooltip" title="Some Div2">Some DIV2</div>
    <div class="tooltip" title="Some Div3">Some DIV3</div>

    <div id="tinymce"></div>

</html>

iframe_page1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Bind</title>
        <style type="text/css">

            .toolTip {width:100px;}
            .myTooTip {
                z-index:99999;
                border:1px solid #CECECE;
                background:white;
                padding:10px;
                display:none;
                color:black;
            }
        </style> 
    </head>
    <body>
        <div class="tooltip" title="Some Div7">Some DIV7</div>
        <div class="tooltip" title="Some Div8">Some DIV8</div>
        <div class="tooltip" title="Some Div9">Some DIV9</div>

    </body>
</html>
4

1 に答える 1

1

あなたの場合e.pageYは問題でした、

tinymce が iframe を作成すると、e.pageY(tinymce の) 現在の位置から 0 に設定されるため、ツール ヒントは再び Y=mce の位置に移動します。手動で処理する必要があり、

JSbin微調整を加えて更新しましたが、

これで問題は解決しますが、

100% の精度を得るには、いくつかの微調整を行う必要がありますが、

編集：JQuery UIでJSBinを更新し、

の日付のないリンクJSBin

これは私の側では問題なく正常に動作します。問題は、同じ関数を 2 回呼び出していたことと、iframe で mouseOut イベントが親ウィンドウに渡されなかったことです。そのため、生成されたツールチップが閉じられませんでした。

コードを変更していますが、これは上記の iframe と同じように機能するシンプルなツールチップです。例で。

クラス名を変更して、ツールチップの冗長なインスタンスを削除しました:)

これが最終的にうまくいくことを願っています

于 2013-09-23T08:01:21.870 に答える