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

将tinymce按钮（UI对象）放入多行可能会有所帮助。这不会解决欠边界问题，但在大多数情况下可能会适合你的情况。

Answer 2

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

autoresize也会使初始化更慢。

Answer 3

您是否尝试过在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"     
        });

使用JQuery时，TinyMCE不适合页面

3 个答案: