TinyMCE가 JQuery를 사용할 때 페이지에 맞지 않습니다.

Question

클릭하면 "숨기기"버튼이 생성되어 TinyMCE 텍스트 영역이있는 양식이 포함 된 초기 숨겨진 div가 표시됩니다.

내가 겪고있는 문제는 TinyMCE 텍스트 영역이 너무 넓어서 페이지의 나머지 부분에 맞지 않는다는 것입니다. 그냥 페이지가 지나치게 하얀색으로 튀어 나와 있습니다. 내 브라우저의 너비를 조정할 때 너비가 조정되는 다른 TinyMCE 텍스트 영역과 동일한 문제가 없습니다.

내 생각에 CSS 문제 일 수밖에 없지만 CSS없이 성공을 거두었 다.

아래의 JQuery 코드를 찾으십시오.

$(document).ready(function() { 
    $('#compose-button').click(
    function() { 
     if ($(this).val() == "Compose note") { 
      $(this).val("Cancel note"); 
      $('#compose').css({'display' : 'block'}); 
      $('textarea.tinymce').tinymce({ 
       script_url : 'jscripts/tinymce_3.4.1_jquery/tinymce/jscripts/tiny_mce/tiny_mce.js', 
       theme : "advanced", 
       plugins: "save, table, tinyautosave, imagemanager, spellchecker, autoresize", 
       theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table", 
       theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker", 
       theme_advanced_buttons2 : "", 
       theme_advanced_buttons3 : "", 
       theme_advanced_toolbar_location : "top", 
       theme_advanced_toolbar_align : "left"  
      }); 
     } 
     else { 
      $(this).val("Compose note"); 
      $('#compose').css({'display' : 'none'}); 
     } 
    }); 
}); 

아래 내 CSS를 찾아주세요 :

html, body { 
    font-family: Verdana, Arial, sans-serif; 
    width: 100%; 
    height: 100%; 
    font-size: 12px; 
    min-width: 780px; 
    min-height: 500px; 
    } 
div#compose{display: none;} 
#compose ul{list-style: none; margin-left: 10px;} 
#compose li{padding: 3px;} 
#compose label {width: 30px; padding-right: 30px; float: left;} 
#compose input, #compose select {color:black; width: 400px; text-align: left;} 

아래 내 HTML을 찾아주세요 : 사전에

<div id="compose"> 
    <!--Form--> 
    <form action="<?php htmlout($action); ?>" method="post" id="compose-form"> 
    <ul> 
     <!--Name-->  
     <li><label for="note_name">Name:</label><input type="text" name="note_name" id="note_name" value=""/></li> 

     <!--Note Type--> 
     <li> 
      <label for="note_type">Type:</label> 
      <select name="note_type" id="note_type"> 
       <option value="">Select one:</option> 
       //PHP stuff 
       </option> 
       <?php endforeach; ?> 
      </select> 
     </li> 

     <!--Tags--> 
     <li><label for="tag">Tags:</label><input type="text" name="tag" id="tag_search"></li> 

     <!--Text-->  
     <li><label for="note_text">Notes:</label><textarea class="tinymce" name="note_text" id="note_text"><?php htmlout($note_text); ?></textarea></li> 

     <!--ID-->  
     <li><input type="hidden" name="note_id" value="<?php htmlout($note_id); ?>"/> 
     <input type="submit" value="<?php htmlout($button); ?>"/></li> 
    </ul> 
    </form> 
</div> 

감사합니다!

Answer 1

문제는 자동 크기 조정 플러그인 때문입니다. 그것을 제거하십시오. 계속 유지하려면 theme_advanced_resizing : true을 사용하여 원하는대로 크기를 조정하십시오.

또한 자동 크기 조정은 초기화를 훨씬 느리게 만듭니다.

Answer 2

tinymce 정의에서 width 및 height 속성을 설정해 보았습니까?

$('textarea.tinymce').tinymce({ 

      width: '100px', 
      height: '100px', 

      script_url : 'jscripts/tinymce_3.4.1_jquery/tinymce/jscripts/tiny_mce/tiny_mce.js', 
      theme : "advanced", 
      plugins: "save, table, tinyautosave, imagemanager, spellchecker, autoresize", 
      theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table", 
      theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker", 
      theme_advanced_buttons2 : "", 
      theme_advanced_buttons3 : "", 
      theme_advanced_toolbar_location : "top", 
      theme_advanced_toolbar_align : "left"  
     }); 

Answer 3

tinymce 버튼 (UI 객체)을 두 개 이상의 행에 넣는 것이 도움이 될 수 있습니다. 이것은 기본적인 문제를 해결하지는 않지만 대부분의 경우 귀하의 주석이 적합 할 수 있습니다.