Firefox에서이 TinyMCE 편집기의 위치를 어떻게 수정할 수 있습니까?

CSS를 사용하여 TinyMCE 편집기를 설정 위치에 배치하려고합니다. Chrome에서는 정상적으로 작동합니다. 그러나 Firefox에서는 편집기가 사라집니다. 나는 복잡한 응용 프로그램에서이 일을하고있다,하지만 난 아주 간단한 테스트 케이스를 재현 할 수 있었다 :Firefox에서이 TinyMCE 편집기의 위치를 어떻게 수정할 수 있습니까?

<style type='text/css'> 
    div.container { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    min-height: 600px; 
} 

div.container div.text { 
    border: 1px dashed black; 
    overflow: hidden; 
} 


div.container div.text div.mceIframeContainer { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

    </style> 



<script type='text/javascript'>//<![CDATA[ 
Event.observe(window, "load", function(){ 

function setup() 
{ 
    var myTinyMCESettings = { 
     mode: 'none', 
     width: '100%', 
     height: '9000px', 
     body_class: 'TypeRegion' 
    }; 

    var editorId = $(document.body).down('div.container div.text div.editor').identify(); 

    tinyMCE.init(myTinyMCESettings); 

    tinyMCE.execCommand("mceAddControl", true, editorId); 
} 

setup(); 

});//]]> 

</script> 


</head> 
<body> 
    <div class="container"> 
    <div class="text" style="position:absolute;top: 2in; left:2in; width: 2in; height: 3in;"> 
     <div class="editor">Enter text here</div> 
    </div> 
</div>

Here is a JSFiddle for this test case합니다. Chrome을 Firefox와 비교하여 편집기가 Firefox에서 어떻게 보이지 않는지 확인하십시오.이 문제의 원인은 무엇이며이를 어떻게 해결할 수 있습니까?I tried making the td have relative positioning, 변화 없음 : UPDATE

div.container div.text table tr td { position: relative; }

출처

2012-06-15 Josh

'div.container div.text div.mceIframeContainer'에 정말로 CSS가 필요합니까? 이 스타일없이 작동하고 동일한 결과를 보여줍니다. 두 브라우저 모두에서 작동합니다. – Smileek

@Smileek TinyMCE 편집기를 절대적으로 배치해야합니다. 그렇지 않으면 제거 할 수없는 ''상단에 약간의 여백이 있습니다. 원한다면 샘플을 만들어이를 표시 할 수 있습니다. – Josh

다음 @Smileek에 대한 추가 정보를 조사 중입니다. – Josh

편집기는 파이어 폭스에있다 - 그것은 단지 그것을 보이지 않게, 0의 폭을 갖는다. 어쨌든 보유 블럭 div.text에 대한 너비를 정의하므로이 값을 사용하여 너비 계산이 브라우저 간 일관성을 유지할 수 있도록 div.mceIframeContainer에 명시적인 너비를 제공 할 수 있습니다. oninit 핸들러에서이 작업을 수행했으나 어떤 경우에 가장 적합한 방법을 결정할 수 있습니다.

너비를 명시 적으로 설정하면 편집기가 나타나지만 에디터가 원하는 것보다 위로 이동 한 Firefox에서는 다른 문제가 나타납니다. 이것은 TinyMCE가 생성하는 요소, 즉 테이블을 삽입하는 상대적으로 위치가 정해진 범위로 인해 발생합니다.

필자는 스팬 내에 테이블을 붙이는 이유를 잘 모릅니다.하지만 파이어 폭스에서 관찰 된 오프셋은 스팬이 비교적 위치가 맞고 인라인 요소라는 사실과 관련이 있습니다. 스타일 적용

.defaultSimpleSkin { 
    display:block; 
}

이 문제를 해결합니다. 변경 사항을 확인하려면 check out this jsFiddle example 수 있습니다.

출처

2012-06-15 19:48:56

감사합니다. 팀 !!! 너는 구세주 야. – Josh

Firefox에서이 TinyMCE 편집기의 위치를 ​​어떻게 수정할 수 있습니까?

답변

관련 문제

Firefox에서이 TinyMCE 편집기의 위치를 어떻게 수정할 수 있습니까?