首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >TinyMCE + Fancybox (AJAX)给我的布局带来了地狱

问TinyMCE + Fancybox (AJAX)给我的布局带来了地狱
EN

Stack Overflow用户
提问于 2012-07-25 09:04:27
回答 1查看 815关注 0票数 1

​

​

左侧是与右侧相同的页面,只有右侧显示了初始化TinyMCE之后飞出Fancybox顶部的所有元素

SEE LIVE EXAMPLE

我当前的设置是Fancybox,它使用AJAX加载PHP页面。页面跳转(如上图所示)是通过堆叠DIVs并将左侧导航栏中某个LIs的onclick事件前移所请求的事件来实现的。所有内部元素都是绝对定位的,并定义了顶部/底部和左侧/右侧。当TinyMCE不在考虑范围内时,这种设置可以很好地工作。

当我初始化TinyMCE时,所有的地狱都崩溃了。我偶尔会让它正确加载(在多个浏览器上),但在大多数情况下,它的功能类似于右上角的图像。我已经用谷歌搜索了好几个小时了,但一无所获。我甚至不知道从何说起。任何建议都是很棒的!

HTML:

代码语言:javascript
复制
<div id="popup">
  <header>
    <a id="admin-link" class="fancybox" href="/dev/sbir/inc/login.php">[login]</a>
    <h1 id="head">Promote Value of SBIR</h1>
  </header>

  <ul id="nav">
    <li onclick="javascript:shiftUpContent(&quot;content_0&quot;);"><a href="#">Provide Success Stories</a></li>
    <li id="last"></li>
</ul>

  <div id="content">
    <div class="content" id="start">
      <h1>Directions</h1>
      <p>To view information on Promote Value of SBIR, select one of the sub-categories to the left.</p>
  </div>

  <div id="content_0" class="content">
    <h1>Provide Success Stories</h1>
    <p>Give Overview Presentation</p>
<ul>
  <li>It is a typical government contract</li>
  <li>It is competitive and I have to "beat someone else out"</li>
  <li>I don't have a chance against the big government contractors</li>
</ul>
<p>Other promotional strategies could include:</p>
<ul>
  <li>Conversations with current/past award winners</li>
  <li>Dr. Google assignments or in vivo browsing with client</li>
</ul>
<h2>Training Classes</h2>
<p>Search "SBIR Training", "SBIR Conferences", "SBIR Calendar" or "SBIR and name of an agency i.e. USDA, Navy, Army, etc" Some SBIR consultants give training classes from time to time as a way to solicit clients.</p>
<h2>External Content</h2>
<p><span style="text-decoration: underline;"><a href="/dev/sbir/www.zyn.com" target="_blank">www.zyn.</a>com</span><br> <a href="/dev/sbir/www.sbir.gov" target="_blank">www.sbir.guv</a></p>
</div>
</div>

JavaScript:

代码语言:javascript
复制
/* navigate through tabs of pop-up */
function shiftUpContent(id){
    topContent.style.zIndex = '5';
    if((topContent = document.getElementById(id)) === null){ return; }

    topContent.style.zIndex = '9998';
}

jQuery插件初始化:

代码语言:javascript
复制
$(document).ready(function() {
    $(".fancybox").fancybox({
        fitToView       : true,
        nextClick       : false,
        closeClick      : false,
        arrows          : false,
        mouseWheel      : false,
        width           : '773px',
        height          : '630px',
        type            : 'ajax',
        beforeShow      : function(){ 
            topContent  = document.getElementById("start");
            document.title  = titleRoot;
            $("#popup .fancybox").fancybox({
                fitToView       : true,
                autoSize        : true,
                nextClick       : false,
                closeClick      : false,
                arrows          : false,
                mouseWheel      : false,
                type            : 'iframe',
                ajax            : {
                                    type    : 'POST',
                                    cache   : false,
                                    success : function(data){
                                        $.fancybox(data);
                                    }
                                  }
            });
            tinyMCE.init({
                mode        : "textareas",
                relative_urls   : false,
                constrain_menus : true
            });
        }
    });
});

我试着尽可能多地剔除不相关的代码,但由于不知道问题所在,很难知道需要保留哪些代码。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-26 00:22:16

好的,经过大约7个小时的调试,我仍然一无所获。设置有时起作用,有时不起作用。

我的解决方案是返回到iframe而不是AJAX来加载fancyboxes。将TinyMCE实例与父页面完全隔离意味着每次关闭fancybox时它们都会完全死亡(一切都像梦一样工作。我只能这么做了。

使用以下代码:

代码语言:javascript
复制
var i, t = tinyMCE.editors;
for (i in t){
    if (t.hasOwnProperty(i)){
        t[i].remove();
    }
}

我可以删除fancybox上的所有实例beforeClose,但这似乎对解决我的问题没有什么影响。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11641343

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档