0

我想将 jQueryUI 的工具提示应用于 TinyMCE 编辑器中的元素，但是，它们不会使用 FF 出现，并且使用 IE 和 Chrome 时会出现问题。我已经尝试将 jQueryUI 的工具提示应用于 iframe 中的元素，并获得了类似的结果。我的脚本在下面，演示位于http://jsbin.com/abEkOnO/1/（请注意，必须禁用 iframe JS，因为它会导致使用 jsbin 的代理错误）。我认为正在创建工具提示，但是，也许 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

这工作正常，对我来说没有任何问题，问题是我们两次调用相同的函数，并且在 iframe 中，mouseOut 事件没有传递给它的父窗口，这就是生成的工具提示没有关闭的原因。

我有更改代码，这是一个简单的工具提示，与上面的 iframe 相同。例如。

我刚刚通过更改类名删除了工具提示的冗余实例:)

我希望这最终会做到

于 2013-09-23T08:01:21.870 回答