jQuery - tinyMCE iframeの外側でdivにCSSクラスを追加しますか？

ユーザがエディタにフォーカスして、ツールチップをぼかして隠すときに、tinyMCEエディタにツールチップを追加したいと思います。問題はtinyMCEがiframeを注入しているのですが、divのifcodeをtinyMCE iframeの外に置いてツールチップを切り替えるためにcssクラスをinorderに追加したいのです。jQuery - tinyMCE iframeの外側でdivにCSSクラスを追加しますか？

基本的に以下の例では、フォーカスにあるform-groupクラスのdivにクラスhasfocusを追加し、ぼかしを削除したいと考えています。どのように私はこれを達成することができます。以下は動作しませんか？

<style> 
     .hasfocus .tool-tip { 
     display: block; 
     opacity: 1; 
     } 

     .tool-tip { 
      display: none; 
      background: #e4f7f9 none repeat scroll 0 0; 
      border-radius: 4px; 
      box-shadow: 3px 3px lightgrey; 
      line-height: 1.3; 
      min-height: 36px; 
      padding: 20px; 
      position: absolute; 
      right: -305px; 
      top: 0; 
      transition: opacity 0.125s ease-in-out 0s; 
      width: 300px; 
      z-index: 500; 
     } 
</style> 


<script type="text/javascript"> 
     tinymce.init({ 
      selector: "textarea", 
      plugins: [ 
       "advlist autolink lists link image charmap print preview anchor" 
      ], 
     toolbar: "insertfile undo redo | styleselect | bold italic, 
     setup : function(ed) { 
       ed.on('init', function() 
       { 
        var a = "hasfocus"; 
        var c = $(this); // this would be the text area 
        var b = $(this).parents(".form-group").first(); 
        var d = b.find(".tool-tip").eq(0), e; 

        $(ed.getBody()).on('blur', function(f) { 
          b.removeClass(a); 
        }); 

        $(ed.getBody()).on('focus', function(f) { 
         // here i need to get the body which is outside the iframe 
         e = $("body").width() - (c.offset().left + c.outerWidth()); 
         d.css("top", c.position().top); 
         b.addClass(a); 
        }); 
       }); 
      } 

     }); 
</script> 

<body> 

<div class="form-group "> 
    <label class="h4" for="Description">Description</label> 
    <div> 
     <!-- all the stuff tinyMCE injects --> 
     <div id="mceu_11" class="mce-tinymce mce-container mce-panel" role="application" tabindex="-1" hidefocus="1" style="visibility: hidden; border- width: 1px;"> 
      <div id="mceu_11-body" class="mce-container-body mce-stack-layout"> 
       <div id="mceu_12" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item mce-first" role="group" tabindex="-1" hidefocus="1"> 
       ... 
       </div> 
       <div id="mceu_17" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" role="group" tabindex="-1" hidefocus="1" style="border-width: 1px 0px 0px;"> 
        <iframe id="PostContent_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 175px; display: block;" src="javascript:"""> 
         <!DOCTYPE html> 
         <html> 
         <head>...</head> 
         <body id="tinymce" class="mce-content-body " contenteditable="true" data-id="PostContent" spellcheck="false"> 
          <p>This is the editor field</p> 
         </body> 
         </html> 
        </iframe> 
       </div> 
      </div> 
     </div> 

     <textarea name="Description"></textarea> 
    </div> 

    <div class="tool-tip" > 
      Please provide a detailed description 
    </div> 
</div> 

</body>

出典

2016-12-13 adam78

TinyMCEのは、それはまた、名前にもかかわらず、彼らはDOMイベントと同じではありませんカスタムイベントを持っているなど、エディタのIFRAMEにアクセスするための固体状API、コンテナを提供します。

私はそれらを使ってセットアップ機能を書き換えました。

tinymce.init({ 
    selector: "textarea", 
    plugins: [ 
    "advlist autolink lists link image charmap print preview anchor" 
    ], 
    toolbar: "insertfile undo redo | styleselect | bold italic", 
    setup : function(ed) { 
    ed.on('init', function(event) { 
     var a = "hasfocus"; 
     var c = $(ed.getContainer()); // this would be the text area 
     var b = c.parents(".form-group").first(); 
     var d = b.find(".tool-tip").eq(0), e; 
     ed.on('blur', function(f) { 
     b.removeClass(a); 
     }); 

     ed.on('focus', function(f) { 
     e = $("body").width() - (c.offset().left + c.outerWidth()); 
     d.css("top", c.position().top); 
     b.addClass(a); 
     }); 
    }); 
    } 
});

出典

2016-12-13 14:32:03 cubny

私の編集したコードをご覧ください。 iframeの外側にあるボディを取得するにはどうすればいいですか？iframeの内側にbodyを入れます： 'e = $（" body "）width（） - （c.offset（）。left + c.outerWidth（）））; ' – adam78

jQuery - tinyMCE iframeの外側でdivにCSSクラスを追加しますか？

答えて

関連する問題