Используйте jQueryUI ToolTip для элемента в TinyMCE

Я хотел бы применить всплывающую подсказку jQueryUI к элементам в редакторе TinyMCE, однако они не отображаются с использованием FF и не работают с использованием IE и Chrome. Я экспериментировал с применением всплывающей подсказки jQueryUI к элементам iframe и получал аналогичные результаты. Мой скрипт ниже, а демо находится в http://jsbin.com/abEkOnO/1/ (обратите внимание, что iframe JS пришлось отключить, поскольку он вызывает ошибку прокси с помощью jsbin). Я думаю, что всплывающие подсказки создаются, однако, возможно, CSS относится к iframe, а не к документу. Я также экспериментировал, создав свой собственный плагин tooltip (http://jsbin.com/AzaKARe/1/), но также получаю фанковые результаты.Используйте jQueryUI ToolTip для элемента в TinyMCE

Как использовать всплывающие подсказки для элементов в редакторе 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>

источник

2013-09-15 user1032531

после просмотра в вашем JSBin я буду просить для более подробной информации, пожалуйста, представить проблему Детали to toolTip, что именно не работает и в каком браузере. – MarmiK

@MarmiK. Извините за задержку, выехал из города на пару дней без доступа в Интернет. Используя FF, подсказка инструмента не появляется, и браузер не отображает название заголовка по умолчанию при наведении указателя мыши. Для IE и Chrome заголовок зависшего элемента вставляется в DOM и впоследствии не удаляется. Вы смотрели на мой JSBin, и если да, то что вы видели? Спасибо – user1032531

В вашем случае была проблема e.pageY,

, как TinyMCE создает IFRAME, то e.pageY устанавливается в 0 от текущего местоположения (от TinyMCE), Таким образом, наконечник инструмента снова переходит в Y = соответствует позиции mce. Вам нужно обрабатывать вручную,

Я обновил JSbin с некоторыми ухищрениями,

это решит проблему,

хотя вы должны сделать некоторые небольшие хитрости, точности 100%

Edit: Обновленный JSBin с JQuery UI,

Недатированной Связь JSBin

Th работает нормально, без проблем на моей стороне, проблема в том, что мы дважды вызывали одну и ту же функцию, а в iframe событие mouseOut не передавалось в родительское окно, поэтому всплывающая подсказка не закрывалась.

У меня меняется код, и это простая подсказка, которая работает так же, как и в iframe выше. в примере.

Я только что удалили избыточную экземпляр подсказке, изменив имя класса :)

Я надеюсь, что это будет сделать, наконец

источник

2013-09-23 08:01:21 MarmiK

Привет MarmiK, я вижу, вы изменили плагин всплывающей подсказки, который я написал, а не подсказку jQueryUI. Обратите внимание, что он все еще неисправен (всплывающая подсказка появляется сразу два места). Я также хотел просто использовать всплывающую подсказку jQueryUI, а не мою. Спасибо – user1032531

Да, его багги, я знаю, что это показывает, я предоставил вам путь, вы должны сделать все остальное, я указал на проблему. У него не должно быть никакой другой проблемы, нет работы, если вы вставляете другой класс для подсказки под 'tinymce', который сделает его идеальным, его вызов сценария дважды в моем случае. – MarmiK

Thanks MarmiK, Может ли это решение применяться к подсказке jQueryUI? – user1032531

Используйте jQueryUI ToolTip для элемента в TinyMCE

ответ

Смежные вопросы