TinyMCE不适合页面使用JQuery时

Question

我创建了一个“撰写笔记”按钮，单击时会显示一个初始隐藏的div，其中包含带有TinyMCE textarea的表单。

我遇到的问题是，显示时，TinyMCE textarea太宽，不适合在页面的其余部分。它突出显示了其他页面上的所有内容都是白色的。我没有与其他TinyMCE textareas相同的问题，其中调整宽度调整我的浏览器的宽度。

我的猜测是，它一定是一个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

问题在于autoresize插件。去掉它。如果你想保留它，那么也可以使用theme_advanced_resizing : true来调整它到任何你想要的。

autoresize也会使初始化慢得多。

Answer 2

您是否尝试过设置tinymce定义中的宽度和高度属性？

$('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对象）放入多行。 这并不能解决潜在的问题，但可能是因为在大多数情况下你的tinymce会适用。