jQuery

Question

我想在用户关注编辑器时向 tinyMCE 编辑器添加工具提示，并在模糊时隐藏工具提示。问题是 tinyMCE 注入了一个 iframe 但 div 我想添加 css class 以切换工具提示驻留在 tinyMCE iframe 之外。

所以基本上在下面的示例中，我想将 class hasfocus 添加到 div 并且 class form-group 聚焦并移除模糊.我怎样才能做到这一点。以下内容不起作用？

<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>

Answer 1

Tinymce 提供实体 api 来访问编辑器的 iframe、容器等。它还有自定义事件，尽管名称不同，但它们与 DOM 事件不同。

我用它们重写了你的设置函数。

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);
      });
    });
  }
});

jQuery - 在 tinyMCE iframe 之外添加 css class 到 div？

jQuery - add css class to div outside of tinyMCE iframe?

html

css

iframe

tinymce