Question

我想将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>

Answer 1

在您的情况下e.pageY出现问题，

当tinymce创建一个iframe时，e.pageY从当前位置（tinymce）设置为0，因此，工具尖端再次转到Y =相应于mce位置。你需要手动处理它，

我已经通过一些调整更新了JSbin，

这将解决问题，

虽然你必须做一些小的调整，准确率为100％

编辑：使用JQuery UI更新了JSBin，

JSBin

的不定链接

这样可以正常工作而没有任何问题，问题是我们两次调用相同的函数而在iframe中mouseOut事件没有传递给它的父窗口，这就是为什么生成的工具提示没有被关闭。

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

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

我希望最终能够做到这一点

在TinyMCE中使用jQueryUI ToolTip on element

1 个答案: