Question

我需要改变tinymce盒子的宽度以适应我的设计，我不知道如何。我搜索了互联网，没有发现任何与jitery版本的tinymce的宽度有关的内容。

<!-- Load jQuery build -->
<script type="text/javascript" src="{BASE_URL}/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
        $(function() {

                $('textarea.tinymce').tinymce({
                        // Location of TinyMCE script
                        script_url : '{BASE_URL}/js/tiny_mce/tiny_mce.js',

                        // General options
                        theme : "advanced",             
                        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                        // Theme options
                        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                        theme_advanced_toolbar_location : "top",
                        theme_advanced_toolbar_align : "left",
                        theme_advanced_statusbar_location : "bottom",
                        theme_advanced_resizing : true,

                        // Example content CSS (should be your site CSS)
                        content_css : "css/content.css",

                        // Drop lists for link/image/media/template dialogs
                        template_external_list_url : "lists/template_list.js",
                        external_link_list_url : "lists/link_list.js",
                        external_image_list_url : "lists/image_list.js",
                        media_external_list_url : "lists/media_list.js",

                        // Replace values for the template plugin
                        template_replace_values : {
                                username : "Some User",
                                staffid : "991234"
                        }
                });
        });


</script>

<td>Description: </td><td><textarea style="height:150px;" name="description" class=" tinymce"></textarea></td> //textarea

Answer 1

您是否尝试过配置您的tinymce编辑器的宽度？见http://www.tinymce.com/wiki.php/Configuration:width

tinyMCE.init({
        ...
        width : "840"
});

for jQuery：

$(function() {

     $('textarea.tinymce').tinymce({
         //...
         width: "840"
     });
});

同时检查这个小提琴http://fiddle.tinymce.com/eaaaab

在一行中启用太多按钮会阻止您使编辑器变得更窄。

Answer 2

tinyMCE.init({
    ...
    width : "640"
    // width: '100%',
});

检查HERE

Answer 3

我在我的项目中使用jQuery插件版本。这就是你需要的：

$(selector).tinymce({
    theme: 'advanced', // basic or advanced
    theme_advanced_resizing : false,
    theme_advanced_resize_horizontal: false,
    theme_advanced_resizing_max_width: '500',
    theme_advanced_resizing_min_height: '300',
    width: '500',
    height: '300'
});

如果你想用CSS强制宽度，试试这个：

.mceEditor > table {
    width: 200px !important;
}

见（TinyMCE width and height disobedient!）

如何改变tinymce jquery盒子的大小？

3 个答案: